Rendering UserProfilePage fails if UserProfileLink is also used

[lmyslinski]

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 / Replay Link

https://github.com/lmyslinski/clerk-repro

Publishable key

pk_test_c3BlY2lhbC1wZWdhc3VzLTE1LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. Open the user panel
2. Click on Custom Page option

Expected behavior:

The page opens

Actual behavior:

Clerk crashes in JS console:

vendors_c9ace7_4.66.0.js:2 Uncaught TypeError: Missing parameter name at 32
 at ui-common_c9ace7_4.66.0.js:1:239490
 at ui-common_c9ace7_4.66.0.js:1:239834
 at h (ui-common_c9ace7_4.66.0.js:1:240660)
 at g (ui-common_c9ace7_4.66.0.js:1:241010)
 at p (ui-common_c9ace7_4.66.0.js:1:237760)
 at l (ui-common_c9ace7_4.66.0.js:1:241574)
 at Object.matches (ui-common_c9ace7_4.66.0.js:1:242081)
 at ui-common_c9ace7_4.66.0.js:1:65462
 at Array.every (<anonymous>)
 at ui-common_c9ace7_4.66.0.js:1:65398
 at lu (vendors_c9ace7_4.66.0.js:2:110794)
 at Es (vendors_c9ace7_4.66.0.js:2:130916)
 at vendors_c9ace7_4.66.0.js:2:129658
 at Ss (vendors_c9ace7_4.66.0.js:2:129723)
 at ss (vendors_c9ace7_4.66.0.js:2:123479)
 at Vl (vendors_c9ace7_4.66.0.js:2:64207)
 at vendors_c9ace7_4.66.0.js:2:120884
2hot-reloader-client.js:162 

Sample code:

 <UserButton afterSignOutUrl="/">
 <UserButton.UserProfileLink
 label="Custom link"
 labelIcon={<div></div>}
 url="https://any-url.com"
 />
 <UserButton.UserProfilePage
 label="Custom Page"
 url="custom"
 labelIcon={<div></div>}
 >
 Custom page
 </UserButton.UserProfilePage>
 </UserButton>

The same behaviour can be observed when a full page is used instead of a modal

Environment

System:
 OS: macOS 14.0
 CPU: (10) arm64 Apple M2 Pro
 Memory: 271.83 MB / 16.00 GB
 Shell: 5.9 - /bin/zsh
 Binaries:
 Node: 20.8.0 - /usr/local/bin/node
 Yarn: 1.22.19 - /usr/local/bin/yarn
 npm: 9.8.0 - /opt/homebrew/bin/npm
 pnpm: 8.7.1 - ~/Library/pnpm/pnpm
 Browsers:
 Chrome: 120.0.6099.71
 Safari: 17.0
 npmPackages:
 @clerk/nextjs: ^4.27.6 => 4.27.7 
 @fontsource/roboto: ^5.0.8 => 5.0.8 
 @joshuajaco/react-pdf-renderer-bundled: ^3.1.12 => 3.1.12 
 @sentry/nextjs: ^7.86.0 => 7.86.0 
 @sentry/node: ^7.86.0 => 7.86.0 
 @sentry/profiling-node: ^1.2.6 => 1.2.6 
 @types/node: ^20 => 20.1.4 
 @types/pdfmake: ^0.2.7 => 0.2.8 
 @types/pg: ^8.10.5 => 8.10.9 
 @types/react: ^18 => 18.2.6 
 @types/react-beautiful-dnd: ^13.1.6 => 13.1.7 
 @types/react-dom: ^18 => 18.2.4 
 @types/uuid: ^9.0.5 => 9.0.7 
 @uidotdev/usehooks: ^2.4.1 => 2.4.1 
 autoprefixer: ^10 => 10.4.14 
 axios: ^1.5.1 => 1.6.2 
 canvas: ^2.11.2 => 2.11.2 
 classnames: ^2.3.2 => 2.3.2 
 daisyui: ^4.4.12 => 4.4.19 
 dayjs: ^1.11.10 => 1.11.10 
 dotenv: ^16.3.1 => 16.3.1 
 drizzle-kit: ^0.19.13 => 0.19.13 
 drizzle-orm: ^0.28.6 => 0.28.6 
 form-data: ^4.0.0 => 4.0.0 
 lodash: ^4.17.21 => 4.17.21 
 next: ^14.0.3 => 14.0.3 
 pg: ^8.11.3 => 8.11.3 
 postcss: ^8 => 8.4.31 
 prettier: 3.0.3 => 3.0.3 
 react: ^18 => 18.2.0 
 react-beautiful-dnd: ^13.1.1 => 13.1.1 
 react-dom: ^18 => 18.2.0 
 react-dropzone: ^14.2.3 => 14.2.3 
 react-hot-toast: ^2.4.1 => 2.4.1 
 react-pdf: ^7.5.1 => 7.6.0 
 supports-color: 8.1.1 => 8.1.1 
 swr: ^2.2.4 => 2.2.4 
 tailwindcss: ^3 => 3.3.2 
 tsx: ^4.4.0 => 4.6.2 
 typescript: ^5.2.2 => 5.3.3 
 uuid: ^9.0.1 => 9.0.1

[panteliselef]

Hey @lmyslinski thank you for reporting this issue.

We have merged a fix and this will be fixed in the next major (coming soon).

As a workaround this can be applied today is to put all custom links after all pages. F.e.

 <UserButton afterSignOutUrl="/">
 <UserButton.UserProfilePage
 label="Custom Page 1"
 url="custom1"
 labelIcon={<div></div>}
 >
 Custom page 1
 </UserButton.UserProfilePage>

 <UserButton.UserProfilePage
 label="Custom Page2"
 url="custom2"
 labelIcon={<div></div>}
 >
 Custom page 2
 </UserButton.UserProfilePage>

 <UserButton.UserProfileLink
 label="Custom link1"
 labelIcon={<div></div>}
 url="https://any-url.com"
 />

 <UserButton.UserProfileLink
 label="Custom link2"
 labelIcon={<div></div>}
 url="https://any-url.com"
 />
 </UserButton>

[lmyslinski]

@panteliselef Thanks a lot for handling this - I've worked around the problem by building a custom user panel but I'm glad it's been fixed

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.