fix(react): Respect ui prop when Clerk instance is passed to IsomorphicClerk

[royanger]

Description

The guard that causes the bug is:

const shouldLoadUi = !this.options.Clerk && this.options.standardBrowser !== false;

@clerk/react, @clerk/nextjs, etc.: this.options.Clerk is undefined → !this.options.Clerk is true → shouldLoadUi is true → getClerkUIEntryChunk() runs → finds uiProp.ClerkUI from the ui prop and returns it → ClerkUI is valid, no overwrite.

@clerk/chrome-extension: this.options.Clerk is a Clerk instance (truthy) → !this.options.Clerk is false → shouldLoadUi is false → ClerkUI = undefined → overwrites the valid ClerkUI from the ui prop.

The chrome-extension needs its own Clerk instance because it has to wire up extension-specific hooks (JWT handling, cookie syncing, storage cache, etc.) in createClerkClient before the instance is used.

---

Fix implemented in packages/react/src/isomorphicClerk.ts:

const shouldLoadUi = (this.options.standardBrowser !== false && !this.options.Clerk) || !!this.options.ui?.ClerkUI;                                                                         

Logic: Load UI when either:

• Standard browser mode without a pre-created Clerk instance (normal CDN path for react/nextjs/react-router/tanstack), OR
• A bundled ClerkUI was provided via the ui prop (chrome-extension, even with standardBrowser: false)

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:

Summary by CodeRabbit

• Bug Fixes

  • Respected custom UI prop when supplying a pre-created Clerk instance to IsomorphicClerk, preventing the Chrome Extension SDK “Clerk was not loaded with Ui components” error.

• Tests

  • Added comprehensive tests covering UI loading behavior across multiple environment and configuration scenarios.

• Chores

  • Bumped package version with a changeset entry.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ec3201

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

This PR includes changesets to release 6 packages

Name	Type
@clerk/react	Minor
@clerk/chrome-extension	Patch
@clerk/expo	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/tanstack-react-start	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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Mar 10, 2026 4:16am

[royanger]

!snapshot

[royanger]

!snapshot

[tmilewski]

!snapshot

[royanger]

!snapshot

[brkalow]

Do you think shouldLoadUi should be false if this.options.ui?.ClerkUI exists? or is that already handled elsewhere?

[royanger]

Nope. I was mostly starting with a draft PR so I could get snapshots, since this issue wasn't showing up in local testing. The updated change in 2dc46ff should be a better approach, but I still need to test it.

[royanger]

!snapshot

[royanger]

!snapshot

[royanger]

!snapshot

[royanger]

!snapshot

[clerk-cookie]

Hey @royanger - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.3.2-snapshot.v20260309193008
@clerk/astro	3.0.2-snapshot.v20260309193008
@clerk/backend	3.0.2-snapshot.v20260309193008
@clerk/chrome-extension	3.1.0-snapshot.v20260309193008
@clerk/clerk-js	6.1.0-snapshot.v20260309193008
@clerk/dev-cli	0.1.1-snapshot.v20260309193008
@clerk/expo	3.1.0-snapshot.v20260309193008
@clerk/expo-passkeys	1.0.2-snapshot.v20260309193008
@clerk/express	2.0.2-snapshot.v20260309193008
@clerk/fastify	3.1.0-snapshot.v20260309193008
@clerk/hono	0.1.0-snapshot.v20260309193008
@clerk/localizations	4.1.0-snapshot.v20260309193008
@clerk/msw	0.0.2-snapshot.v20260309193008
@clerk/nextjs	7.0.2-snapshot.v20260309193008
@clerk/nuxt	2.0.2-snapshot.v20260309193008
@clerk/react	6.1.0-snapshot.v20260309193008
@clerk/react-router	3.0.2-snapshot.v20260309193008
@clerk/shared	4.1.0-snapshot.v20260309193008
@clerk/tanstack-react-start	1.0.2-snapshot.v20260309193008
@clerk/testing	2.0.2-snapshot.v20260309193008
@clerk/ui	1.1.0-snapshot.v20260309193008
@clerk/upgrade	2.0.2-snapshot.v20260309193008
@clerk/vue	2.0.2-snapshot.v20260309193008

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.3.2-snapshot.v20260309193008 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.2-snapshot.v20260309193008 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.2-snapshot.v20260309193008 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.1.0-snapshot.v20260309193008 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.1.0-snapshot.v20260309193008 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@0.1.1-snapshot.v20260309193008 --save-exact

@clerk/expo

npm i @clerk/expo@3.1.0-snapshot.v20260309193008 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.2-snapshot.v20260309193008 --save-exact

@clerk/express

npm i @clerk/express@2.0.2-snapshot.v20260309193008 --save-exact

@clerk/fastify

npm i @clerk/fastify@3.1.0-snapshot.v20260309193008 --save-exact

@clerk/hono

npm i @clerk/hono@0.1.0-snapshot.v20260309193008 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.1.0-snapshot.v20260309193008 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.2-snapshot.v20260309193008 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.2-snapshot.v20260309193008 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.2-snapshot.v20260309193008 --save-exact

@clerk/react

npm i @clerk/react@6.1.0-snapshot.v20260309193008 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.2-snapshot.v20260309193008 --save-exact

@clerk/shared

npm i @clerk/shared@4.1.0-snapshot.v20260309193008 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.2-snapshot.v20260309193008 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.2-snapshot.v20260309193008 --save-exact

@clerk/ui

npm i @clerk/ui@1.1.0-snapshot.v20260309193008 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.2-snapshot.v20260309193008 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.2-snapshot.v20260309193008 --save-exact

[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: 4d1d9da6-a4d2-42b8-8b33-e09e7af62dd4

📥 Commits

Reviewing files that changed from the base of the PR and between 1448607 and 0e9f584.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

• packages/react/src/isomorphicClerk.ts

---

📝 Walkthrough

Walkthrough

Updates change IsomorphicClerk UI-loading logic: ClerkUI is now loaded when either (a) standardBrowser is not false and no Clerk instance is provided, or (b) a ui.ClerkUI is explicitly supplied. The clerk.load call is updated to include ui.ClerkUI when present. A changeset bumps the clerk/react package with a minor version. Comprehensive tests were added to validate UI loading across CDN, bundled, Expo, and Chrome Extension scenarios and to ensure ui.ClerkUI is preserved when a Clerk instance is passed.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main fix: respecting the ui prop when a Clerk instance is passed to IsomorphicClerk, which directly addresses the root cause of the Chrome Extension SDK error documented in the changeset.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ 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.}

[tmilewski]

Throwing this in here for posterity:

The deep research and comprehensive testing across all SDK packages has been completed. Here's a summary of where things stand:

  Fix implemented in packages/react/src/isomorphicClerk.ts:                                                                                                                
  const shouldLoadUi =
    (this.options.standardBrowser !== false && !this.options.Clerk) || !!this.options.ui?.ClerkUI;                                                                         

  Logic: Load UI when either:                                                                                                                                              
  - Standard browser mode without a pre-created Clerk instance (normal CDN path for react/nextjs/react-router/tanstack), OR
  - A bundled ClerkUI was provided via the ui prop (chrome-extension, even with standardBrowser: false)

  8 scenario tests added in packages/react/src/__tests__/isomorphicClerk.test.ts covering every SDK combination:
  - @clerk/react, @clerk/nextjs, @clerk/react-router, @clerk/tanstack-react-start → CDN
  - @clerk/react with bundled ui prop → bundled ClerkUI
  - @clerk/expo native → no UI
  - @clerk/expo web → CDN
  - @clerk/chrome-extension without syncHost → bundled ClerkUI
  - @clerk/chrome-extension with syncHost → bundled ClerkUI (the bug case)
  - Clerk instance without ui prop → no UI
  - Server marker ui without ClerkUI → no CDN

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7997

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 9ec3201