New UserButton.MenuItems component causing error

[jdhenry08]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/jdhenry08/clerk-nextjs-demo-app-router

Publishable key

pk_test_YWRhcHRlZC1mYXduLTQ0LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. Sign up/sign in
2. Navigate to the Dashboard page

Expected behavior:

Navigating to the dashboard should show the page (with an additional option in the UserButton menu)

Actual behavior:

Error: Could not find the module "/workspaces/clerk-nextjs-demo-app-router/node_modules/.pnpm/@clerk+nextjs@5.3.0_next@14.2.5_react-dom@18.2.0_react@18.2.0__react@18.2.0__react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@clerk/nextjs/dist/esm/client-boundary/uiComponents.js#UserButton#MenuItems" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Environment

System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 5.33 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.15.1 - ~/nvm/current/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.7.0 - ~/nvm/current/bin/npm
    pnpm: 9.5.0 - ~/nvm/current/bin/pnpm
  npmPackages:
    @clerk/nextjs: ^5.3.0 => 5.3.0 
    @types/node: ^20.14.14 => 20.14.14 
    @types/react: ^18.3.3 => 18.3.3 
    @types/react-dom: ^18.3.0 => 18.3.0 
    @types/react-syntax-highlighter: ^15.5.13 => 15.5.13 
    clsx: ^2.1.1 => 2.1.1 
    next: ^14.2.5 => 14.2.5 
    postcss: ^8.4.41 => 8.4.41 
    prism-react-renderer: ^2.3.1 => 2.3.1 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-syntax-highlighter: ^15.5.0 => 15.5.0 
    tailwindcss: ^3.4.9 => 3.4.9 
    typescript: ^5.5.4 => 5.5.4

[EmmanouelaPothitou]

You should add 'use client' to the parent component of UserButton. For example:

[jdhenry08]

You should add 'use client' to the parent component of UserButton.

This works for the reproduction example, but not in my actual use case - the user button is part of a larger component that relies on being a server component.

If the MenuItems functionality requires being used in a client component, might I suggest making that clearer in the documentation at least?

[LekoArts]

You might be able to fix this by changing your component tree and how you interleave the components: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components
The underlying issue is probably: vercel/next.js#51593

Anyways, I've opened a docs PR to hopefully clear up that requirement: clerk/clerk-docs#1430

Thanks for opening the issue!