[Bug]: Type error in Dropdown Menu and Menubar

[manasvi-pandey]

Describe the bug

After installing the DropdownMenu component from shadcn/ui, there are a lot of type errors which stops the application from building (NextJS application to be specific)

The type errors also occur when we try to use DropdownMenuItem in our code like below

<DropdownMenu>
    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

And the error reads as follow Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & Omit<DropdownMenuLabelProps & RefAttributes<HTMLDivElement>, "ref"> & { ...; } & RefAttributes<...>'.

Affected component/components

DropdownMenu, Menubar

How to reproduce

1. Install DropdownMenu component npx shadcn-ui@latest add dropdown-menu
2. Navigate to @/components/ui/dropdown-menu

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browser: Chrome Version 122.0.6261.131 (Official Build) (64-bit)
NextJS Version 14.1.4

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Merchnest]

I don't think it's the problem with the shadcn/ui code

[NickMandylas]

For those who come across this issue – I had the exact same problem in my monorepo (turbo/pnpm workspaces). The issue was there was a dependency version mismatch between my @app/ui package and my @app/web package for @types/react.

The version in my @app/ui was 18.2.74 whilst in @app/web it was 18.2.75. Updating @app/ui to 18.2.75 resolved the issue.

[muhajirdev]

Thank you @NickMandylas