Compound Pattern in Nextjs 14 doesn't work

Question

Hi, I want to create ToolTip component to use like this

<ToolTip>
    <ToolTip.Button>
        button
    </ToolTip.Button>
    <ToolTip.Content>
        content
    </ToolTip.Content>
</ToolTip>

// index.tsx
const ToolTip = () => {
  return (
    /* context and children */
  )
}
ToolTip.Button = ToolTipButton
ToolTip.Content = ToolTipContent

export default ToolTip

So I followed this guide: https://www.patterns.dev/react/compound-pattern
I already add "use client" for every component

There is no development error

But Nextjs said that Error: Unsupported Server Component type: undefined. What's wrong?

David · Accepted Answer

Oh, I got it. I have to add "use client" into the component where I use this component.

Compound Pattern in Nextjs 14 doesn't work

2 Replies