fix(react-router): read VITE env-var for dev-warning suppression in SPA mode (#8682)

Author: jacekradko

.changeset/spa-dev-warning-env.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react-router': patch
+---
+
+Read `VITE_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING` on the client when React Router is used in SPA mode (or as a library). Previously the env-var shortcut only took effect through the SSR `rootAuthLoader`, so client-only setups had no way to suppress the development-keys warning without passing `unsafe_disableDevelopmentModeConsoleWarning` to `<ClerkProvider>` directly.

packages/react-router/src/client/ReactRouterClerkProvider.tsx

@@ -7,6 +7,7 @@ import {
   isSpaMode as _isSpaMode,
   warnForSsr,
 } from '../utils/assert';
+import { getPublicEnvVariables } from '../utils/env';
 import { ClerkReactRouterOptionsProvider } from './ReactRouterOptionsContext';
 import type { ClerkState, ReactRouterClerkProviderProps } from './types';
 import { useAwaitableNavigate } from './useAwaitableNavigate';
@@ -102,7 +103,9 @@ function ClerkProviderBase<TUi extends Ui = Ui>({ children, ...rest }: ClerkProv
       disabled: __telemetryDisabled,
       debug: __telemetryDebug,
     },
-    unsafe_disableDevelopmentModeConsoleWarning: __unsafeDisableDevelopmentModeConsoleWarning,
+    unsafe_disableDevelopmentModeConsoleWarning:
+      __unsafeDisableDevelopmentModeConsoleWarning ??
+      getPublicEnvVariables(undefined).unsafeDisableDevelopmentModeConsoleWarning,
   };
 
   const keylessProps = __keylessClaimUrl

packages/react-router/src/client/__tests__/ClerkProvider.test.tsx

@@ -16,20 +16,24 @@ vi.mock('react-router', () => ({
   UNSAFE_DataRouterContext: React.createContext(null),
 }));
 
+const isSpaModeMock = vi.fn(() => false as boolean);
+
 vi.mock('../../utils/assert', () => ({
   assertPublishableKeyInSpaMode: vi.fn(),
   assertValidClerkState: vi.fn(),
-  isSpaMode: () => false,
+  isSpaMode: () => isSpaModeMock(),
   warnForSsr: vi.fn(),
 }));
 
 describe('ClerkProvider __internal_clerkUIUrl via clerkState', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    isSpaModeMock.mockReturnValue(false);
   });
 
   afterEach(() => {
     vi.clearAllMocks();
+    vi.unstubAllEnvs();
   });
 
   it('passes __internal_clerkUIUrl from clerkState to the underlying ClerkProvider', async () => {
@@ -73,6 +77,24 @@ describe('ClerkProvider __internal_clerkUIUrl via clerkState', () => {
     );
   });
 
+  it('reads VITE_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING in SPA mode where clerkState is absent', async () => {
+    isSpaModeMock.mockReturnValue(true);
+    vi.stubEnv('VITE_CLERK_UNSAFE_DISABLE_DEVELOPMENT_MODE_CONSOLE_WARNING', 'true');
+    const { ClerkProvider } = await import('../ReactRouterClerkProvider');
+
+    render(
+      <ClerkProvider publishableKey='pk_test_xxx'>
+        <div>Test</div>
+      </ClerkProvider>,
+    );
+
+    expect(mockClerkProvider).toHaveBeenCalledWith(
+      expect.objectContaining({
+        unsafe_disableDevelopmentModeConsoleWarning: true,
+      }),
+    );
+  });
+
   it('passes __internal_clerkUIUrl alongside other props from clerkState', async () => {
     const { ClerkProvider } = await import('../ReactRouterClerkProvider');