"DropdownMenuTrigger must be used within DropdownMenu" with Astro

[benjamin-guibert]

I followed exactly the instructions from this page to use shadcn/ui with Astro, even using the template from scratch, when I add the Dropdown Menu component and use it (again, following exactly the example), I always get the following error: DropdownMenuTrigger must be used within DropdownMenu

Any idea what could be wrong given the fact that I tried on a totally empty project following the instructions?

I shared a repository: https://github.com/benjamin-guibert/shadcn/tree/main

You juste have to pnpm install and pnpm dev.

[benjamin-guibert]

I've found the issue: Astro treats all React components as server components by default.

I fixed the issue by calling my component in a .tsx file instead of .astro file and added the prop client:load in the parent .astro file.

It would be great if there were a warning on this page that interactive components should be specified as client components with client:load prop. 🙏🏻