Rendering UserProfilePage fails if UserProfileLink is also used

lmyslinski commented 10 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] 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:

Open the user panel
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 commented 9 months ago

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 commented 9 months ago

@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 / javascript