fix(shared): use @clerk/ui package version for UI script URL (#7418)

Author: nikosdouvlis

packages/shared/global.d.ts

@@ -1,6 +1,7 @@
 declare const PACKAGE_NAME: string;
 declare const PACKAGE_VERSION: string;
 declare const JS_PACKAGE_VERSION: string;
+declare const UI_PACKAGE_VERSION: string;
 declare const __DEV__: boolean;
 declare const __BUILD_DISABLE_RHC__: boolean;
 declare const __CLERK_USE_RQ__: boolean;

packages/shared/src/__tests__/loadClerkJsScript.spec.ts

@@ -19,6 +19,7 @@ vi.mock('../loadScript');
 
 setClerkJsLoadingErrorPackageName('@clerk/react');
 const jsPackageMajorVersion = getMajorVersion(JS_PACKAGE_VERSION);
+const uiPackageMajorVersion = getMajorVersion(UI_PACKAGE_VERSION);
 
 const mockClerk = {
   status: 'ready',
@@ -318,7 +319,7 @@ describe('loadClerkUiScript(options)', () => {
     expect(result).toBeNull();
     expect(loadScript).toHaveBeenCalledWith(
       expect.stringContaining(
-        `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`,
+        `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`,
       ),
       expect.objectContaining({
         async: true,
@@ -401,13 +402,13 @@ describe('clerkUiScriptUrl()', () => {
   test('constructs URL correctly for development key', () => {
     const result = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey });
     expect(result).toBe(
-      `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`,
+      `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`,
     );
   });
 
   test('constructs URL correctly for production key', () => {
     const result = clerkUiScriptUrl({ publishableKey: mockProdPublishableKey });
-    expect(result).toBe(`https://example.clerk.com/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`);
+    expect(result).toBe(`https://example.clerk.com/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`);
   });
 
   test('uses provided clerkUiVersion', () => {
@@ -418,7 +419,23 @@ describe('clerkUiScriptUrl()', () => {
   test('uses latest as default version when not specified', () => {
     const result = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey });
     // When no version is specified, versionSelector should return the major version
-    expect(result).toContain(`/npm/@clerk/ui@${jsPackageMajorVersion}/`);
+    expect(result).toContain(`/npm/@clerk/ui@${uiPackageMajorVersion}/`);
+  });
+
+  test('uses UI_PACKAGE_VERSION independently from JS_PACKAGE_VERSION', () => {
+    // Verify that clerkUiScriptUrl uses UI_PACKAGE_VERSION, not JS_PACKAGE_VERSION
+    const uiResult = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey });
+    const jsResult = clerkJsScriptUrl({ publishableKey: mockDevPublishableKey });
+
+    // UI script should use UI package version
+    expect(uiResult).toContain(`/npm/@clerk/ui@${uiPackageMajorVersion}/`);
+    // JS script should use JS package version
+    expect(jsResult).toContain(`/npm/@clerk/clerk-js@${jsPackageMajorVersion}/`);
+
+    // They should be using their respective versions (which may differ)
+    // This test ensures we don't accidentally use JS version for UI
+    expect(uiResult).not.toContain('@clerk/clerk-js');
+    expect(jsResult).not.toContain('@clerk/ui');
   });
 });
 

packages/shared/src/loadClerkJsScript.ts

@@ -236,7 +236,7 @@ export const clerkUiScriptUrl = (opts: LoadClerkUiScriptOptions) => {
   }
 
   const scriptHost = buildScriptHost({ publishableKey, proxyUrl, domain });
-  const version = versionSelector(clerkUiVersion);
+  const version = versionSelector(clerkUiVersion, UI_PACKAGE_VERSION);
   return `https://${scriptHost}/npm/@clerk/ui@${version}/dist/ui.browser.js`;
 };
 

packages/shared/tsdown.config.mts

@@ -5,6 +5,7 @@ import type { Options } from 'tsdown';
 import { defineConfig } from 'tsdown';
 
 import clerkJsPackage from '../clerk-js/package.json' with { type: 'json' };
+import clerkUiPackage from '../ui/package.json' with { type: 'json' };
 import sharedPackage from './package.json' with { type: 'json' };
 
 export default defineConfig(({ watch }) => {
@@ -21,6 +22,7 @@ export default defineConfig(({ watch }) => {
       PACKAGE_NAME: `"${sharedPackage.name}"`,
       PACKAGE_VERSION: `"${sharedPackage.version}"`,
       JS_PACKAGE_VERSION: `"${clerkJsPackage.version}"`,
+      UI_PACKAGE_VERSION: `"${clerkUiPackage.version}"`,
       __DEV__: `${watch}`,
       __BUILD_DISABLE_RHC__: JSON.stringify(false),
       __CLERK_USE_RQ__: `${process.env.CLERK_USE_RQ === 'true'}`,

packages/shared/vitest.setup.mts

@@ -7,6 +7,7 @@ globalThis.__DEV__ = true;
 globalThis.PACKAGE_NAME = '@clerk/react';
 globalThis.PACKAGE_VERSION = '0.0.0-test';
 globalThis.JS_PACKAGE_VERSION = '5.0.0';
+globalThis.UI_PACKAGE_VERSION = '1.0.0';
 globalThis.__CLERK_USE_RQ__ = process.env.CLERK_USE_RQ === 'true';
 
 // Setup Web Crypto API for tests (Node.js 18+ compatibility)