0

I'm trying to turn a 3rd party component into a client component. Here is how nextjs does it

Official Next.js Example

app/carousel.js

'use client';

import { AcmeCarousel } from 'acme-carousel';

export default AcmeCarousel;

app/page.js

import Carousel from './carousel';

export default function Page() {
  return (
    <div>
      <p>View pictures</p>

      {/*  Works, since Carousel is a Client Component */}
      <Carousel />
    </div>
  );
}

My code

ClientPopover.jsx

'use client';

import { Popover } from '@headlessui/react'

export const PopoverGroup = Popover.group;

header.jsx

import PopoverGroup  from '../../../app/ClientPopover'

<PopoverGroup>
   ...
</PopoverGroup>

This is the error I'm getting:

enter image description here

Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

0 Answers0