fix(ui): surface silent failures in component renderer by jacekradko · Pull Request #8379 · clerk/javascript

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

jacekradko · 2026-04-22T17:01:10Z

Summary

Adds diagnostic coverage to the UI component renderer so silent initialization failures produce actionable errors instead of hanging indefinitely.

Catches rejections on the lazy module import in ensureMounted and logs a [Clerk UI] console error with the underlying cause. Currently these rejections disappear because every mount call in clerk-js/src/core/clerk.ts uses void this.#clerkUI.then(...) without a .catch.
Starts a 10s timeout alongside the lazy import. If the renderer has not mounted by then, logs a [Clerk UI] warning naming the common causes (failed chunk load, dev-server misconfiguration, pre-hydration mount). Cleared on both success and failure paths.

Covers the full fan-out with a single change in ensureMounted — the ~60 void this.#clerkUI.then(...) call sites in clerk-js all funnel through this one promise, so there is no per-mount-method surface to touch.

Context

Surfaced while debugging a regression where pnpm dev:sandbox loaded but components never rendered — Clerk.loaded === true, #app empty, zero console output. The root cause was an unrelated @rspack/cli bump enabling lazy-compilation, whose proxy chunk never resolved. With these diagnostics in place, the next person to hit a similar class of failure gets a direct signpost.

Test plan

Verified fix renders SignIn normally when the renderer mounts successfully (no regression, no spurious logs).
Reverted the environmental workaround to reproduce the stalled-mount condition and confirmed the 10s warning fires with the expected message.
CI builds and tests pass.

Add a catch on the lazy import chain in `ensureMounted` so initialization rejections log a `[Clerk UI]` error instead of being swallowed, and emit a diagnostic warning after 10s if the renderer has not mounted. Makes stalled chunk loads, unresolved lazy-compilation proxies, and similar dev-time failures surface with an actionable message instead of hanging without feedback.

vercel · 2026-04-22T17:01:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 2, 2026 2:32am

changeset-bot · 2026-04-22T17:01:16Z

🦋 Changeset detected

Latest commit: 1831e6a

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

coderabbitai · 2026-04-22T17:03:33Z

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: 173fd3e2-5e0c-443a-957f-62a82b96e27c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a423d6 and 11ba8b9.

📒 Files selected for processing (2)

.changeset/ui-mount-diagnostic.md
packages/ui/src/Components.tsx

📝 Walkthrough

Walkthrough

This pull request adds diagnostic improvements to component rendering initialization in the @clerk/ui package. A changeset documents runtime diagnostics for component mounts. The mountComponentRenderer function in packages/ui/src/Components.tsx is updated to include a 10-second timeout mechanism for lazy module imports and component rendering. On timeout or import failure, console errors are logged. Previously, initialization failures could occur silently; these changes convert them to actionable console output through error logging and diagnostic warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: surfacing previously silent failures in the component renderer by adding diagnostic logging.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the diagnostic improvements and failure scenarios being addressed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

pkg-pr-new · 2026-04-22T17:04:49Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 1831e6a

wobsoriano

👍🏼 👍🏼 👍🏼

github-actionsBot added the ui label Apr 22, 2026

vercelBotdeployed to Preview April 22, 2026 17:01 View deployment

wobsoriano approved these changes Apr 22, 2026
View reviewed changes

Merge branch 'main' into jacek/ui-mount-diagnostic
571daf7

vercelBotdeployed to Preview April 23, 2026 02:03 View deployment

Merge branch 'main' into jacek/ui-mount-diagnostic
75249e0

vercelBotdeployed to Preview April 23, 2026 16:02 View deployment

Merge branch 'main' into jacek/ui-mount-diagnostic
ab4c147

vercelBotdeployed to Preview May 1, 2026 03:26 View deployment

Merge branch 'main' into jacek/ui-mount-diagnostic
1831e6a

vercelBotdeployed to Preview May 2, 2026 02:32 View deployment

jacekradko merged commit 84698b5 into mainMay 2, 2026
43 checks passed

jacekradko deleted the jacek/ui-mount-diagnostic branch May 2, 2026 03:00

clerk-cookie mentioned this pull request May 2, 2026
ci(repo): Version packages #8440
Merged