New UserButton.MenuItems component causing error

Question

New UserButton.MenuItems component causing error

Closed this issue 5 months ago · 3 comments

jdhenry08 commented 5 months ago

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:

Sign up/sign in
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

Answer 1 · 2024-08-12T10:55:19.000Z

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

Answer 2 · 2024-08-12T14:22:23.000Z

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?

Answer 3 · 2024-08-13T06:46:00.000Z

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!