fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19) - #8534

Merged
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is
May 13, 2026
Merged

fix(ui): Extract ref from ExternalElementMounter props to prevent nodeRef overwrite (React 19)#8534
wobsoriano merged 5 commits into
mainfrom
rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 12, 2026

Copy link
Copy Markdown
Member

Description

  • In React 19, ref is a regular prop for function components (see ref as a prop). A forwarded ref was landing in ...rest inside ExternalElementMounter and overwriting ref={nodeRef} on the host div, so nodeRef.current stayed null and mountIcon was never called. React 18 silently dropped the ref, masking the bug.
  • Extracts ref from props before the spread to fix the collision.
  • Adds unit tests for mount/unmount behavior and the React 19 regression path.

Fixes#8512#8447
Resolves SDK-73

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercelBot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 12, 2026 9:31pm

Request Review

@changeset-bot

changeset-botBot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 88acc26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 18:54
@wobsoriano
wobsoriano marked this pull request as draft May 12, 2026 18:55
@coderabbitai

coderabbitaiBot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 26c7b660-d859-4e3e-91d4-493372813750

📥 Commits

Reviewing files that changed from the base of the PR and between 01c777e and 88acc26.

📒 Files selected for processing (1)
  • .changeset/soft-worms-battle.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/soft-worms-battle.md

📝 Walkthrough

Walkthrough

This PR prevents a forwarded ref from being spread onto ExternalElementMounter's host div by explicitly destructuring ref (renamed _forwardedRef) from props, preserving the component's internal nodeRef so mount runs and unmount cleans up. It adds tests that assert mount/unmount behavior with and without a forwarded ref and includes a changeset patch entry for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main fix: extracting ref from props in ExternalElementMounter to prevent nodeRef overwrite in React 19.
Description check✅ PassedThe description clearly explains the React 19 regression, the fix approach, and references the related issues with a detailed explanation of the problem and solution.
Linked Issues check✅ PassedThe PR successfully addresses all requirements from issue #8512: extracts ref from props to prevent collision, ensures mount() is invoked properly, restores React 18/19 consistency, and adds comprehensive tests covering the regression path.
Out of Scope Changes check✅ PassedAll changes directly support the linked issue objectives: the ExternalElementMounter fix, test coverage for mount/unmount behavior, and the changesets entry documenting the patch version bump.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8534

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8534

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8534

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8534

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8534

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8534

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8534

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8534

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8534

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8534

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8534

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8534

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8534

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8534

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8534

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8534

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8534

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8534

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8534

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8534

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8534

commit: 88acc26

@wobsoriano
wobsoriano marked this pull request as ready for review May 12, 2026 21:30
@wobsoriano
wobsoriano merged commit 9a360c9 into mainMay 13, 2026
43 checks passed
@wobsoriano
wobsoriano deleted the rob/sdk-73-userprofile-custom-page-icon-not-rendered-when-ui-package-is branch May 13, 2026 15:01
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom page labelIcon doesn't render on React 19 (ref collision in ExternalElementMounter)

2 participants

@wobsoriano@alexcarpenter