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

.changeset/tricky-apples-attend.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': minor
+---
+
+The `ui` prop is now respected if a Clerk instance is passed via the `Clerk` prop to `IsomorphicClerk`. This fixes the 'Clerk was not loaded with Ui components' error in the Chrome Extension SDK.

packages/react/src/__tests__/isomorphicClerk.test.ts

@@ -200,4 +200,57 @@ describe('isomorphicClerk', () => {
       expect(result).toBe(mockClerkUI);
     });
   });
+
+  describe('ui.ClerkUI with pre-created Clerk instance', () => {
+    it('passes ui.ClerkUI to clerk.load when Clerk instance is provided', async () => {
+      const mockClerkUI = vi.fn();
+      const mockLoad = vi.fn().mockResolvedValue(undefined);
+      const mockClerkInstance = {
+        load: mockLoad,
+        loaded: false,
+      };
+
+      // Simulate the chrome-extension flow: pre-created Clerk instance + ui prop
+      const clerk = new IsomorphicClerk({
+        publishableKey: 'pk_test_XXX',
+        Clerk: mockClerkInstance as any,
+        ui: { ClerkUI: mockClerkUI } as any,
+      });
+
+      // Set the global Clerk so getClerkJsEntryChunk resolves
+      (global as any).Clerk = mockClerkInstance;
+
+      await (clerk as any).getEntryChunks();
+
+      // clerk.load should have been called with ui.ClerkUI preserved
+      expect(mockLoad).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ui: expect.objectContaining({
+            ClerkUI: mockClerkUI,
+          }),
+        }),
+      );
+    });
+
+    it('does not load UI scripts from CDN when Clerk instance is provided', async () => {
+      const mockClerkUI = vi.fn();
+      const mockClerkInstance = {
+        load: vi.fn().mockResolvedValue(undefined),
+        loaded: false,
+      };
+
+      const clerk = new IsomorphicClerk({
+        publishableKey: 'pk_test_XXX',
+        Clerk: mockClerkInstance as any,
+        ui: { ClerkUI: mockClerkUI } as any,
+      });
+
+      (global as any).Clerk = mockClerkInstance;
+
+      await (clerk as any).getEntryChunks();
+
+      // Should not attempt to load UI from CDN
+      expect(loadClerkUIScript).not.toHaveBeenCalled();
+    });
+  });
 });

packages/react/src/isomorphicClerk.ts

@@ -472,8 +472,9 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
 
       if (!clerk.loaded) {
         this.beforeLoad(clerk);
-        // Only load UI scripts in standard browser environments (not native/headless)
-        const shouldLoadUi = !this.options.Clerk && this.options.standardBrowser !== false;
+        // Load UI in standard browser environments, or when a bundled ClerkUI is provided via the ui prop
+        const shouldLoadUi =
+          this.options.standardBrowser !== false && (!this.options.Clerk || this.options.ui?.ClerkUI);
         const ClerkUI = shouldLoadUi ? await this.getClerkUIEntryChunk() : undefined;
         await clerk.load({ ...this.options, ui: { ...this.options.ui, ClerkUI } });
       }