Invite members UI throws exceptions and stops rendering for organization

auchenberg commented 7 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://jam.dev/c/f83ea49c-8671-4728-aab1-4b429a4f3a7b

https://app.replay.io/recording/settings--5195416e-5c66-4e93-a898-1720edbee081

Publishable key

pk_test_Y2xlcmsucHJvbW90ZWQucXVldHphbC0yMy5sY2wuZGV2JA

Description

Invite members UI throws exceptions and stops rendering for organization

Steps to reproduce: When clicking the invite UI in the component, the rendering breaks and throws exception.

Expected behavior:

Not to break.

Actual behavior:

Screenshot 2024-03-02 at 5 06 52 PM

TypeError: Unexpected MODIFIER at 40, expected END
    at u (ui-common_f3b649_4.70.1.js:1:241095)
    at ui-common_f3b649_4.70.1.js:1:241686
    at h (ui-common_f3b649_4.70.1.js:1:241704)
    at g (ui-common_f3b649_4.70.1.js:1:242054)
    at p (ui-common_f3b649_4.70.1.js:1:238804)
    at l (ui-common_f3b649_4.70.1.js:1:242618)
    at Object.matches (ui-common_f3b649_4.70.1.js:1:243125)
    at ui-common_f3b649_4.70.1.js:1:65894
    at Array.every (<anonymous>)
    at ui-common_f3b649_4.70.1.js:1:65830
    at lu (vendors_f3b649_4.70.1.js:2:110794)
    at Es (vendors_f3b649_4.70.1.js:2:130916)
    at ss (vendors_f3b649_4.70.1.js:2:123217)
    at Vl (vendors_f3b649_4.70.1.js:2:64207)
    at vendors_f3b649_4.70.1.js:2:129718
    at Ss (vendors_f3b649_4.70.1.js:2:129723)
    at os (vendors_f3b649_4.70.1.js:2:122220)
    at S (vendors_f3b649_4.70.1.js:2:148237)
    at MessagePort.M (vendors_f3b649_4.70.1.js:2:148769)

See attached replay.

Environment

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 262.56 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.2.1
  npmPackages:
    @clerk/nextjs: ^4.29.7 => 4.29.7
    @clerk/themes: ^1.7.9 => 1.7.9
    @google-cloud/firestore: ^7.1.0 => 7.1.0
    @octokit/rest: ^18.5.2 => 18.12.0
    @stripe/stripe-js: ^1.13.1 => 1.54.2
    axios: ^0.24.0 => 0.24.0
    custom-protocol-check: ^1.4.0 => 1.4.0
    delay: ^5.0.0 => 5.0.0
    depd: ^2.0.0 => 2.0.0
    dotenv: ^8.2.0 => 8.6.0
    firebase: 9.16.0 => 9.16.0
    firebase-admin: 11.1.0 => 11.1.0
    gray-matter: ^4.0.3 => 4.0.3
    intercom-next: ^1.3.5 => 1.3.5
    isomorphic-unfetch: ^3.0.0 => 3.1.0
    lodash: ^4.17.21 => 4.17.21
    markdown-it: ^12.3.2 => 12.3.2
    marked: ^2.0.3 => 2.1.3
    moment: ^2.24.0 => 2.29.4
    next: ^14.0.3 => 14.0.3
    next-firebase-auth: ^1.0.1 => 1.0.1
    next-sitemap: ^2.5.17 => 2.5.28
    nextjs-progressbar: ^0.0.16 => 0.0.16
    nprogress: ^0.2.0 => 0.2.0
    posthog-js: ^1.96.0 => 1.96.0
    prettier: ^2.0.5 => 2.8.8
    react: ^18.2.0 => 18.2.0
    react-content-loader: ^6.0.3 => 6.2.1
    react-dom: ^18.2.0 => 18.2.0
    react-modal-video: ^2.0.1 => 2.0.1
    react-notion-x: ^4.15.0 => 4.19.8
    react-switch: ^7.0.0 => 7.0.0
    slug: ^5.3.0 => 5.3.0
    slugify: ^1.6.4 => 1.6.6
    stripe: ^8.67.0 => 8.222.0

nikosdouvlis commented 7 months ago

Hello @auchenberg, many thanks for the report. We usually triage issues every Monday but it has come to my attention that we missed this one last week - sorry about that. I'll make sure we investigate and resolve this one as fast as possible :)

auchenberg commented 7 months ago

Narrowed it down:

This breaks:

    <OrganizationProfile>
      <OrganizationProfile.Link
        label="Plan and billing"
        labelIcon={<p>B</p>}
        url={`/account/plan-billing?account=${currentOrganizationId}`}
      /> 
    </OrganizationProfile>

This works:

    <OrganizationProfile>

    </OrganizationProfile>

Specially it seems that adding a querystring to the url param that breaks

panteliselef commented 7 months ago

Hey @auchenberg thank you again for reporting this. This is now fixed in the latest version of clerk-js. Version: 4.70.4

auchenberg commented 7 months ago

🔥

clerk / javascript