fix(ui): surface silent failures in component renderer

[jacekradko]

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.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Apr 23, 2026 2:03am

[changeset-bot]

🦋 Changeset detected

Latest commit: 571daf7

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]

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]

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: 571daf7

[wobsoriano]

👍🏼 👍🏼 👍🏼