From 01e0b0fa882afc26de51768e21df07d745aaf37d Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 28 May 2025 12:53:19 +0200 Subject: [PATCH 1/4] initial --- .changeset/every-glasses-shave.md | 13 +++++++++++++ packages/react-router/README.md | 2 +- packages/react-router/package.json | 4 ++-- packages/react-router/src/client/types.ts | 4 ++-- packages/react-router/src/ssr/types.ts | 16 +++++++++++----- pnpm-lock.yaml | 18 ++++++------------ 6 files changed, 35 insertions(+), 22 deletions(-) create mode 100644 .changeset/every-glasses-shave.md diff --git a/.changeset/every-glasses-shave.md b/.changeset/every-glasses-shave.md new file mode 100644 index 00000000000..3e67dba24f6 --- /dev/null +++ b/.changeset/every-glasses-shave.md @@ -0,0 +1,13 @@ +--- +'@clerk/react-router': major +--- + +**Important:** This release only changes the required `react-router` version from `7.1.2` to `7.6.1`. No other changes were applied in this release. + +You can upgrade like so: + +```shell +npm install react-router@latest @clerk/react-router@latest +``` + +The reason for this change is that `@clerk/react-router` internally uses exports from `react-router` that were changed in [7.6.1](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v761). These changes are breaking and `@clerk/react-router` can't add backward-compatible support for older and newer versions. diff --git a/packages/react-router/README.md b/packages/react-router/README.md index c97285dd49f..2226563603f 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -31,7 +31,7 @@ ### Prerequisites -- React Router `^7.1.2` or later +- React Router `^7.6.1` or later - React 18 or later - Node.js `>=20.0.0` or later - An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_react-router). diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 587ff7514f8..c8b08bb01a6 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -90,12 +90,12 @@ "devDependencies": { "@types/cookie": "^0.6.0", "esbuild-plugin-file-path-extensions": "^2.1.4", - "react-router": "7.5.2" + "react-router": "7.6.1" }, "peerDependencies": { "react": "catalog:peer-react", "react-dom": "catalog:peer-react", - "react-router": "^7.1.2" + "react-router": "^7.6.1" }, "engines": { "node": ">=20.0.0" diff --git a/packages/react-router/src/client/types.ts b/packages/react-router/src/client/types.ts index 65020edbd71..dd4a668c352 100644 --- a/packages/react-router/src/client/types.ts +++ b/packages/react-router/src/client/types.ts @@ -1,9 +1,9 @@ import type { ClerkProviderProps } from '@clerk/clerk-react'; import type { InitialState, Without } from '@clerk/types'; import type React from 'react'; -import type { CreateComponentProps } from 'react-router/route-module'; +import type { GetAnnotations } from 'react-router/internal'; -export type ReactRouterComponentProps = CreateComponentProps; +export type ReactRouterComponentProps = GetAnnotations['ComponentProps']; export type ClerkState = { __type: 'clerkState'; diff --git a/packages/react-router/src/ssr/types.ts b/packages/react-router/src/ssr/types.ts index fc2df32cbae..fec833d187f 100644 --- a/packages/react-router/src/ssr/types.ts +++ b/packages/react-router/src/ssr/types.ts @@ -9,7 +9,7 @@ import type { SignUpForceRedirectUrl, } from '@clerk/types'; import type { LoaderFunction, UNSAFE_DataWithResponseInit } from 'react-router'; -import type { CreateServerLoaderArgs } from 'react-router/route-module'; +import type { GetAnnotations } from 'react-router/internal'; type Func = (...args: any[]) => unknown; @@ -21,15 +21,21 @@ type RouteModule = { clientLoader?: Func; action?: Func; clientAction?: Func; - HydrateFallback?: unknown; - default?: unknown; - ErrorBoundary?: unknown; + HydrateFallback?: Func; + default?: Func; + ErrorBoundary?: Func; [key: string]: unknown; }; +type MatchInfo = { + id: string; + module: RouteModule; +}; + export type RouteInfo = { parents: RouteInfo[]; module: RouteModule; + matches: Array; id: unknown; file: string; path: string; @@ -102,7 +108,7 @@ type RootAuthLoaderCallbackReturn = | Promise>; // TODO: Figure out how to use the Route.LoaderArgs from userland code -export type LoaderFunctionArgs = CreateServerLoaderArgs; +export type LoaderFunctionArgs = GetAnnotations['LoaderArgs']; export type LoaderFunctionReturn = ReturnType; export type LoaderFunctionArgsWithAuth = LoaderFunctionArgs & { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7ab51bf68fa..466b3ff05ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -847,8 +847,8 @@ importers: specifier: ^2.1.4 version: 2.1.4 react-router: - specifier: 7.5.2 - version: 7.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 7.6.1 + version: 7.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) packages/remix: dependencies: @@ -2981,7 +2981,7 @@ packages: '@expo/bunyan@4.0.1': resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==} - engines: {node: '>=0.10.0'} + engines: {'0': node >=0.10.0} '@expo/cli@0.22.26': resolution: {integrity: sha512-I689wc8Fn/AX7aUGiwrh3HnssiORMJtR2fpksX+JIe8Cj/EDleblYMSwRPd0025wrwOV9UN1KM/RuEt/QjCS3Q==} @@ -11954,8 +11954,8 @@ packages: peerDependencies: react: '>=16.8' - react-router@7.5.2: - resolution: {integrity: sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==} + react-router@7.6.1: + resolution: {integrity: sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==} engines: {node: '>=20.0.0'} peerDependencies: react: '>=18' @@ -13401,9 +13401,6 @@ packages: cpu: [arm64] os: [linux] - turbo-stream@2.4.0: - resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} - turbo-stream@2.4.1: resolution: {integrity: sha512-v8kOJXpG3WoTN/+at8vK7erSzo6nW6CIaeOvNOkHQVDajfz1ZVeSxCbc6tOH4hrGZW7VUCV0TOXd8CPzYnYkrw==} @@ -28517,12 +28514,11 @@ snapshots: '@remix-run/router': 1.23.0 react: 18.3.1 - react-router@7.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-router@7.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: cookie: 1.0.2 react: 18.3.1 set-cookie-parser: 2.6.0 - turbo-stream: 2.4.0 optionalDependencies: react-dom: 18.3.1(react@18.3.1) @@ -30207,8 +30203,6 @@ snapshots: turbo-linux-arm64@2.5.3: optional: true - turbo-stream@2.4.0: {} - turbo-stream@2.4.1: {} turbo-windows-64@2.5.3: From 5b2d3958b288e95475a55408c2016d5f26d3bd8a Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 3 Jun 2025 11:19:56 +0200 Subject: [PATCH 2/4] simplify --- .changeset/every-glasses-shave.md | 12 ++----- packages/react-router/README.md | 2 +- packages/react-router/package.json | 2 +- .../src/client/ReactRouterClerkProvider.tsx | 6 ++-- packages/react-router/src/client/types.ts | 3 -- packages/react-router/src/ssr/types.ts | 36 +------------------ 6 files changed, 8 insertions(+), 53 deletions(-) diff --git a/.changeset/every-glasses-shave.md b/.changeset/every-glasses-shave.md index 3e67dba24f6..a1eb6acdae0 100644 --- a/.changeset/every-glasses-shave.md +++ b/.changeset/every-glasses-shave.md @@ -1,13 +1,5 @@ --- -'@clerk/react-router': major +'@clerk/react-router': patch --- -**Important:** This release only changes the required `react-router` version from `7.1.2` to `7.6.1`. No other changes were applied in this release. - -You can upgrade like so: - -```shell -npm install react-router@latest @clerk/react-router@latest -``` - -The reason for this change is that `@clerk/react-router` internally uses exports from `react-router` that were changed in [7.6.1](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v761). These changes are breaking and `@clerk/react-router` can't add backward-compatible support for older and newer versions. +In this release the TypeScript types for `rootAuthLoader()` and `` were adjusted but should still work as before. Previously, these types relied on internal, unstable React Router types that changed in their recent 7.6.1 release. We simplified our TypeScript types and no longer rely on internal exports from React Router. diff --git a/packages/react-router/README.md b/packages/react-router/README.md index 2226563603f..c97285dd49f 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -31,7 +31,7 @@ ### Prerequisites -- React Router `^7.6.1` or later +- React Router `^7.1.2` or later - React 18 or later - Node.js `>=20.0.0` or later - An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_react-router). diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 68ccdb3f010..051c2b8b956 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -95,7 +95,7 @@ "peerDependencies": { "react": "catalog:peer-react", "react-dom": "catalog:peer-react", - "react-router": "^7.6.1" + "react-router": "^7.1.2" }, "engines": { "node": ">=20.0.0" diff --git a/packages/react-router/src/client/ReactRouterClerkProvider.tsx b/packages/react-router/src/client/ReactRouterClerkProvider.tsx index e80bb6a7eb9..93f628dd4e2 100644 --- a/packages/react-router/src/client/ReactRouterClerkProvider.tsx +++ b/packages/react-router/src/client/ReactRouterClerkProvider.tsx @@ -8,7 +8,7 @@ import { warnForSsr, } from '../utils/assert'; import { ClerkReactRouterOptionsProvider } from './ReactRouterOptionsContext'; -import type { ClerkState, ReactRouterClerkProviderProps, ReactRouterComponentProps } from './types'; +import type { ClerkState, ReactRouterClerkProviderProps } from './types'; import { useAwaitableNavigate } from './useAwaitableNavigate'; export * from '@clerk/clerk-react'; @@ -119,9 +119,9 @@ type ClerkReactRouterOptions = Partial< Omit >; -// TODO: Remove "any" on loaderData type +// TODO: Remove "any" on loaderData type and use Route.ComponentProps from userland code type ClerkProviderProps = ClerkReactRouterOptions & { - loaderData?: ReactRouterComponentProps['loaderData']; + loaderData?: any; }; export const ClerkProvider = ({ children, loaderData, ...opts }: ClerkProviderProps) => { diff --git a/packages/react-router/src/client/types.ts b/packages/react-router/src/client/types.ts index dd4a668c352..ee26bf747a5 100644 --- a/packages/react-router/src/client/types.ts +++ b/packages/react-router/src/client/types.ts @@ -1,9 +1,6 @@ import type { ClerkProviderProps } from '@clerk/clerk-react'; import type { InitialState, Without } from '@clerk/types'; import type React from 'react'; -import type { GetAnnotations } from 'react-router/internal'; - -export type ReactRouterComponentProps = GetAnnotations['ComponentProps']; export type ClerkState = { __type: 'clerkState'; diff --git a/packages/react-router/src/ssr/types.ts b/packages/react-router/src/ssr/types.ts index edf7724a85c..9e86fd59d3f 100644 --- a/packages/react-router/src/ssr/types.ts +++ b/packages/react-router/src/ssr/types.ts @@ -9,40 +9,6 @@ import type { SignUpForceRedirectUrl, } from '@clerk/types'; import type { LoaderFunction, UNSAFE_DataWithResponseInit } from 'react-router'; -import type { GetAnnotations } from 'react-router/internal'; - -type Func = (...args: any[]) => unknown; - -type RouteModule = { - meta?: Func; - links?: Func; - headers?: Func; - loader?: Func; - clientLoader?: Func; - action?: Func; - clientAction?: Func; - HydrateFallback?: Func; - default?: Func; - ErrorBoundary?: Func; - [key: string]: unknown; -}; - -type MatchInfo = { - id: string; - module: RouteModule; -}; - -export type RouteInfo = { - parents: RouteInfo[]; - module: RouteModule; - matches: Array; - id: unknown; - file: string; - path: string; - params: unknown; - loaderData: unknown; - actionData: unknown; -}; export type GetAuthReturn = Promise; @@ -108,7 +74,7 @@ type RootAuthLoaderCallbackReturn = | Promise>; // TODO: Figure out how to use the Route.LoaderArgs from userland code -export type LoaderFunctionArgs = GetAnnotations['LoaderArgs']; +export type LoaderFunctionArgs = Parameters[0]; export type LoaderFunctionReturn = ReturnType; export type LoaderFunctionArgsWithAuth = LoaderFunctionArgs & { From ca44dc86d49075e61d7dfbf1afb876d0b3f9d10f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 3 Jun 2025 11:37:47 +0200 Subject: [PATCH 3/4] further simplify --- packages/react-router/src/ssr/authenticateRequest.ts | 2 +- packages/react-router/src/ssr/getAuth.ts | 3 ++- packages/react-router/src/ssr/loadOptions.ts | 3 ++- packages/react-router/src/ssr/rootAuthLoader.ts | 3 ++- packages/react-router/src/ssr/types.ts | 4 +--- 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/react-router/src/ssr/authenticateRequest.ts b/packages/react-router/src/ssr/authenticateRequest.ts index b0cce6c17df..e82f86ee247 100644 --- a/packages/react-router/src/ssr/authenticateRequest.ts +++ b/packages/react-router/src/ssr/authenticateRequest.ts @@ -2,8 +2,8 @@ import { createClerkClient } from '@clerk/backend'; import type { AuthenticateRequestOptions, SignedInState, SignedOutState } from '@clerk/backend/internal'; import { AuthStatus, constants } from '@clerk/backend/internal'; import { handleNetlifyCacheInDevInstance } from '@clerk/shared/netlifyCacheHandler'; +import type { LoaderFunctionArgs } from 'react-router'; -import type { LoaderFunctionArgs } from './types'; import { patchRequest } from './utils'; export async function authenticateRequest( diff --git a/packages/react-router/src/ssr/getAuth.ts b/packages/react-router/src/ssr/getAuth.ts index f97532fcc5e..5113f2e1877 100644 --- a/packages/react-router/src/ssr/getAuth.ts +++ b/packages/react-router/src/ssr/getAuth.ts @@ -1,9 +1,10 @@ import { stripPrivateDataFromObject } from '@clerk/backend/internal'; +import type { LoaderFunctionArgs } from 'react-router'; import { noLoaderArgsPassedInGetAuth } from '../utils/errors'; import { authenticateRequest } from './authenticateRequest'; import { loadOptions } from './loadOptions'; -import type { GetAuthReturn, LoaderFunctionArgs, RootAuthLoaderOptions } from './types'; +import type { GetAuthReturn, RootAuthLoaderOptions } from './types'; type GetAuthOptions = Pick; diff --git a/packages/react-router/src/ssr/loadOptions.ts b/packages/react-router/src/ssr/loadOptions.ts index a958a39d9c6..13b7c361ab0 100644 --- a/packages/react-router/src/ssr/loadOptions.ts +++ b/packages/react-router/src/ssr/loadOptions.ts @@ -4,10 +4,11 @@ import { getEnvVariable } from '@clerk/shared/getEnvVariable'; import { isDevelopmentFromSecretKey } from '@clerk/shared/keys'; import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy'; import { handleValueOrFn } from '@clerk/shared/utils'; +import type { LoaderFunctionArgs } from 'react-router'; import { getPublicEnvVariables } from '../utils/env'; import { noSecretKeyError, satelliteAndMissingProxyUrlAndDomain, satelliteAndMissingSignInUrl } from '../utils/errors'; -import type { LoaderFunctionArgs, RootAuthLoaderOptions } from './types'; +import type { RootAuthLoaderOptions } from './types'; import { patchRequest } from './utils'; export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderOptions = {}) => { diff --git a/packages/react-router/src/ssr/rootAuthLoader.ts b/packages/react-router/src/ssr/rootAuthLoader.ts index 64a0c309533..688df50fbdf 100644 --- a/packages/react-router/src/ssr/rootAuthLoader.ts +++ b/packages/react-router/src/ssr/rootAuthLoader.ts @@ -1,9 +1,10 @@ import { decorateObjectWithResources } from '@clerk/backend/internal'; +import type { LoaderFunctionArgs } from 'react-router'; import { invalidRootLoaderCallbackReturn } from '../utils/errors'; import { authenticateRequest } from './authenticateRequest'; import { loadOptions } from './loadOptions'; -import type { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types'; +import type { LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types'; import { assertValidHandlerResult, injectRequestStateIntoResponse, diff --git a/packages/react-router/src/ssr/types.ts b/packages/react-router/src/ssr/types.ts index 9e86fd59d3f..f2d7fb20cfe 100644 --- a/packages/react-router/src/ssr/types.ts +++ b/packages/react-router/src/ssr/types.ts @@ -8,7 +8,7 @@ import type { SignUpFallbackRedirectUrl, SignUpForceRedirectUrl, } from '@clerk/types'; -import type { LoaderFunction, UNSAFE_DataWithResponseInit } from 'react-router'; +import type { LoaderFunction, LoaderFunctionArgs, UNSAFE_DataWithResponseInit } from 'react-router'; export type GetAuthReturn = Promise; @@ -73,8 +73,6 @@ type RootAuthLoaderCallbackReturn = | UNSAFE_DataWithResponseInit | Promise>; -// TODO: Figure out how to use the Route.LoaderArgs from userland code -export type LoaderFunctionArgs = Parameters[0]; export type LoaderFunctionReturn = ReturnType; export type LoaderFunctionArgsWithAuth = LoaderFunctionArgs & { From 0aeaa5c4f5cb3c9bffff33f72e3e72dd1b6901b8 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 3 Jun 2025 11:44:50 +0200 Subject: [PATCH 4/4] improve changeset --- .changeset/every-glasses-shave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/every-glasses-shave.md b/.changeset/every-glasses-shave.md index a1eb6acdae0..d4afbe1bd78 100644 --- a/.changeset/every-glasses-shave.md +++ b/.changeset/every-glasses-shave.md @@ -2,4 +2,4 @@ '@clerk/react-router': patch --- -In this release the TypeScript types for `rootAuthLoader()` and `` were adjusted but should still work as before. Previously, these types relied on internal, unstable React Router types that changed in their recent 7.6.1 release. We simplified our TypeScript types and no longer rely on internal exports from React Router. +In this release the TypeScript types for `rootAuthLoader()`, `getAuth()`, and `` were adjusted but should still work as before. Previously, these types relied on internal, unstable React Router types that changed in their recent 7.6.1 release. We simplified our TypeScript types and no longer rely on internal exports from React Router.