Invite members UI throws exceptions and stops rendering for organization
auchenberg opened this issue · 4 comments
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://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:
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.0Hello @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 :)
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
Hey @auchenberg thank you again for reporting this. This is now fixed in the latest version of clerk-js. Version: 4.70.4
🔥