diff --git a/.changeset/spa-dev-warning-env.md b/.changeset/spa-dev-warning-env.md new file mode 100644 index 00000000000..0301bd824fe --- /dev/null +++ b/.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 `` directly. diff --git a/packages/react-router/src/client/ReactRouterClerkProvider.tsx b/packages/react-router/src/client/ReactRouterClerkProvider.tsx index f2dafc2f9fc..9cf8748b9ca 100644 --- a/packages/react-router/src/client/ReactRouterClerkProvider.tsx +++ b/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({ children, ...rest }: ClerkProv disabled: __telemetryDisabled, debug: __telemetryDebug, }, - unsafe_disableDevelopmentModeConsoleWarning: __unsafeDisableDevelopmentModeConsoleWarning, + unsafe_disableDevelopmentModeConsoleWarning: + __unsafeDisableDevelopmentModeConsoleWarning ?? + getPublicEnvVariables(undefined).unsafeDisableDevelopmentModeConsoleWarning, }; const keylessProps = __keylessClaimUrl diff --git a/packages/react-router/src/client/__tests__/ClerkProvider.test.tsx b/packages/react-router/src/client/__tests__/ClerkProvider.test.tsx index 1677e93a22a..50efe4cc8ac 100644 --- a/packages/react-router/src/client/__tests__/ClerkProvider.test.tsx +++ b/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( + +
Test
+
, + ); + + expect(mockClerkProvider).toHaveBeenCalledWith( + expect.objectContaining({ + unsafe_disableDevelopmentModeConsoleWarning: true, + }), + ); + }); + it('passes __internal_clerkUIUrl alongside other props from clerkState', async () => { const { ClerkProvider } = await import('../ReactRouterClerkProvider');