react-router v7 compatibility

[lensbart]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://unfortunately-not-available

Publishable key

pk_test_not_relevant_to_the_question

Description

@clerk/remix has a peer dependency on @remix-run/react.

A couple of days ago, React Router v7 was released, which is the recommended migration path for Remix apps. However, @clerk/remix is not compatible with RR v7 due to the aforementioned peer dependency, and the React Router section of the Clerk docs mention that

Loaders and Actions are currently not supported by Clerk with React Router.

So this is a friendly request to make Clerk compatible with RRv7.

Thanks!

Environment

System:
    OS: macOS 15.1.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 1.06 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 113.0.1774.35
    Safari: 18.1.1
  npmPackages:
    @babel/plugin-syntax-import-assertions: ^7.26.0 => 7.26.0 
    @babel/preset-react: ^7.25.9 => 7.25.9 
    @babel/preset-typescript: ^7.26.0 => 7.26.0 
    @biomejs/biome: 1.9.4 => 1.9.4 
    @clerk/remix: ^4.2.52 => 4.2.52 
    @clerk/testing: ^1.3.26 => 1.3.26 
    @clerk/themes: ^2.1.45 => 2.1.45 
    @conform-to/react: ^1.2.2 => 1.2.2 
    @conform-to/zod: ^1.2.2 => 1.2.2 
    @deepgram/captions: ^1.2.0 => 1.2.0 
    @deepgram/sdk: ^3.9.0 => 3.9.0 
    @dnd-kit/core: ^6.1.0 => 6.1.0 
    @dnd-kit/sortable: ^8.0.0 => 8.0.0 
    @dnd-kit/utilities: ^3.2.2 => 3.2.2 
    @epic-web/restore-scroll: ^1.1.1 => 1.1.1 
    @eslint/compat: ^1.2.3 => 1.2.3 
    @eslint/js: ^9.15.0 => 9.15.0 
    @faker-js/faker: ^9.2.0 => 9.2.0 
    @formatjs/cli: ^6.3.11 => 6.3.11 
    @google-cloud/storage: ^7.14.0 => 7.14.0 
    @google-cloud/translate: ^8.5.0 => 8.5.0 
    @google-cloud/video-transcoder: ^3.3.0 => 3.3.0 
    @inngest/eslint-plugin: ^0.0.7 => 0.0.7 
    @langchain/community: ^0.3.15 => 0.3.15 
    @langchain/core: ^0.3.18 => 0.3.18 
    @langchain/openai: ^0.3.14 => 0.3.14 
    @mdx-js/rollup: ^3.1.0 => 3.1.0 
    @mjackson/headers: ^0.8.0 => 0.8.0 
    @mux/blurup: ^0.2.3 => 0.2.3 
    @mux/mux-node: ^9.0.1 => 9.0.1 
    @mux/mux-player: ^3.1.0 => 3.1.0 
    @mux/mux-player-react: ^3.1.0 => 3.1.0 
    @paralleldrive/cuid2: ^2.2.2 => 2.2.2 
    @phosphor-icons/react: ^2.1.7 => 2.1.7 
    @playwright/test: ^1.48.2 => 1.48.2 
    @prisma/client: ^5.22.0 => 5.22.0 
    @radix-ui/react-accordion: ^1.2.1 => 1.2.1 
    @radix-ui/react-alert-dialog: ^1.1.2 => 1.1.2 
    @radix-ui/react-checkbox: ^1.1.2 => 1.1.2 
    @radix-ui/react-collapsible: ^1.1.1 => 1.1.1 
    @radix-ui/react-dialog: ^1.1.2 => 1.1.2 
    @radix-ui/react-dropdown-menu: ^2.1.2 => 2.1.2 
    @radix-ui/react-hover-card: ^1.1.2 => 1.1.2 
    @radix-ui/react-icons: ^1.3.2 => 1.3.2 
    @radix-ui/react-label: ^2.1.0 => 2.1.0 
    @radix-ui/react-popover: ^1.1.2 => 1.1.2 
    @radix-ui/react-progress: ^1.1.0 => 1.1.0 
    @radix-ui/react-radio-group: ^1.2.1 => 1.2.1 
    @radix-ui/react-scroll-area: ^1.2.1 => 1.2.1 
    @radix-ui/react-select: ^2.1.2 => 2.1.2 
    @radix-ui/react-separator: ^1.1.0 => 1.1.0 
    @radix-ui/react-slot: ^1.1.0 => 1.1.0 
    @radix-ui/react-switch: ^1.1.1 => 1.1.1 
    @radix-ui/react-tabs: ^1.1.1 => 1.1.1 
    @radix-ui/react-toast: ^1.2.2 => 1.2.2 
    @radix-ui/react-tooltip: ^1.1.4 => 1.1.4 
    @react-hookz/web: ^24.0.4 => 24.0.4 
    @react-router/dev: ^7.0.1 => 7.0.1 
    @react-router/node: ^7.0.1 => 7.0.1 
    @react-router/remix-routes-option-adapter: ^7.0.1 => 7.0.1 
    @react-router/serve: ^7.0.1 => 7.0.1 
    @remix-run/node: ^2.15.0 => 2.15.0 
    @sentry/remix: ^8.38.0 => 8.38.0 
    @sentry/vite-plugin: ^2.22.6 => 2.22.6 
    @slack/web-api: ^7.7.0 => 7.7.0 
    @types/accept-language-parser: ^1.5.6 => 1.5.6 
    @types/howler: ^2.2.12 => 2.2.12 
    @types/json-stable-stringify: ^1.1.0 => 1.1.0 
    @types/jsrsasign: ^10.5.14 => 10.5.14 
    @types/morgan: ^1.9.9 => 1.9.9 
    @types/node: ^22.9.0 => 22.9.0 
    @types/react: ^18.3.12 => 18.3.12 
    @types/react-dom: ^18.3.1 => 18.3.1 
    @zoom/videosdk: ^1.12.12 => 1.12.12 
    accept-language-parser: ^1.5.0 => 1.5.0 
    autoprefixer: ^10.4.20 => 10.4.20 
    axios: ^1.7.7 => 1.7.7 
    babel-plugin-react-compiler: ^19.0.0-beta-63b359f-20241101 => 19.0.0-beta-63b359f-20241101 
    class-variance-authority: ^0.7.0 => 0.7.0 
    cloudinary: ^2.5.1 => 2.5.1 
    clsx: ^2.1.1 => 2.1.1 
    cmdk: ^1.0.4 => 1.0.4 
    cross-env: ^7.0.3 => 7.0.3 
    csv-writer: ^1.6.0 => 1.6.0 
    dotenv: ^16.4.5 => 16.4.5 
    dotenv-cli: ^7.4.2 => 7.4.2 
    embla-carousel-react: ^8.4.0 => 8.4.0 
    esbuild: ^0.24.0 => 0.24.0 
    eslint: ^9.15.0 => 9.15.0 
    eslint-plugin-curly-quotes: ^1.3.2 => 1.3.2 
    eslint-plugin-formatjs: ^5.2.5 => 5.2.5 
    eslint-plugin-perfectionist: ^3.9.1 => 3.9.1 
    eslint-plugin-react-compiler: ^19.0.0-beta-63b359f-20241101 => 19.0.0-beta-63b359f-20241101 
    howler: ^2.2.4 => 2.2.4 
    inngest: ^3.25.1 => 3.25.1 
    inngest-cli: ^1.1.0 => 1.1.0 
    isbot: ^5.1.17 => 5.1.17 
    json-stable-stringify: ^1.1.1 => 1.1.1 
    jsrsasign: ^11.1.0 => 11.1.0 
    jszip: ^3.10.1 => 3.10.1 
    knip: ^5.37.1 => 5.37.1 
    langchain: ^0.3.6 => 0.3.6 
    langsmith: ^0.2.5 => 0.2.5 
    microsoft-cognitiveservices-speech-sdk: ^1.41.0 => 1.41.0 
    morgan: ^1.10.0 => 1.10.0 
    nanoid: ^5.0.8 => 5.0.8 
    nock: ^14.0.0-beta.15 => 14.0.0-beta.15 
    npm-run-all: ^4.1.5 => 4.1.5 
    openai: ^4.72.0 => 4.72.0 
    openapi-fetch: ^0.13.0 => 0.13.0 
    openapi-typescript: ^7.4.3 => 7.4.3 
    postcss: ^8.4.49 => 8.4.49 
    posthog-js: ^1.186.1 => 1.186.1 
    prisma: ^5.22.0 => 5.22.0 
    random: ^5.1.1 => 5.1.1 
    react: ^18.3.1 => 18.3.1 
    react-compiler-runtime: ^19.0.0-beta-63b359f-20241101 => 19.0.0-beta-63b359f-20241101 
    react-dom: ^18.3.1 => 18.3.1 
    react-dropzone: ^14.3.5 => 14.3.5 
    react-intl: ^7.0.1 => 7.0.1 
    react-markdown: ^9.0.1 => 9.0.1 
    react-router: ^7.0.1 => 7.0.1 
    recharts: ^2.13.3 => 2.13.3 
    rehype-raw: ^7.0.0 => 7.0.0 
    remeda: ^2.17.3 => 2.17.3 
    remix-flat-routes: ^0.6.5 => 0.6.5 
    remix-themes: ^1.5.1 => 1.5.1 
    svix: ^1.40.0 => 1.40.0 
    tailwind-merge: ^2.5.4 => 2.5.4 
    tailwindcss: ^3.4.15 => 3.4.15 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    tiny-invariant: ^1.3.3 => 1.3.3 
    tsx: ^4.19.2 => 4.19.2 
    typescript: ^5.6.3 => 5.6.3 
    typescript-eslint: ^8.14.0 => 8.14.0 
    uuidv4: ^6.2.13 => 6.2.13 
    vite: ^5.4.11 => 5.4.11 
    vite-plugin-babel: ^1.2.0 => 1.2.0 
    vitest: ^2.1.5 => 2.1.5 
    zod: ^3.23.8 => 3.23.8 
    zodix: ^0.4.4 => 0.4.4

[panteliselef]

We are working on a new sdk specific for react router

[LekoArts]

Just to give an update here, I'm awaiting feedback on an issue I filed at the Remix repository: remix-run/react-router#12399 (there were holidays in America so waiting time is expected).

Once that's fixed I'm positive that a Beta release won't take long afterwards.

[LekoArts]

Hello folks, since the issue mentioned above was fixed I was able to update the PR. You could give this version a try:

npm install @clerk/[email protected] --save-exact

Inside your root.tsx add the following (in addition to the already existing things):

import { rootAuthLoader } from "@clerk/react-router/ssr.server";
import { ClerkProvider, SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/react-router";

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args)
}

export default function App({ loaderData }: Route.ComponentProps) {
  return (
    <ClerkProvider loaderData={loaderData}>
		<Outlet />
    </ClerkProvider>
  );
}

The full docs are being worked on here: clerk/clerk-docs#1760

[igilham]

Hey, @LekoArts. I just tried the build you posted and found that it works well for my side project. Once set up, I can't tell the difference from the Remix version.

[iangrayhazzard]

@LekoArts Thanks for all your work on this. After following your instructions, I'm getting the error: useNavigate() may be used only in the context of a component. I see remix-run/react-router#12399 and I'm running the latest react-router version (7.0.2). This PR did not fix the issue for me. If I comment out the ClerkProvider, the error goes away.

I am attempting to upgrade a Remix v2 + React 19 app to RR7. Is this a known error or am I doing something else wrong? Maybe a conflict because of React 19?

UPDATE: This issue was resolved by downgrading Vite back to version ^5. I had been attempting to use the latest, but apparently the temporary fix for useNavigate() does not work on Vite 6 and above.

[LekoArts]

@iangrayhazzard Thanks for giving it a try and reporting back what solved your issue. As far as I can tell our library should be doing everything correctly, so I'd encourage you to report these issues to the React Router folks so that they can solve it.

[LekoArts]

The announcement (https://clerk.com/changelog/2024-12-12-react-router-beta) and the docs (https://clerk.com/docs/references/react-router/overview) are now live!

[ZeldOcarina]

That's amazing @LekoArts you are the best!!

Just a suggestion, I'd throw a redirect rather than returning it if the user is not signed in:

https://remix.run/docs/ja/main/utils/redirect

And you can throw redirects to break through the call stack and redirect right away:

if (!session) {
  throw redirect("/login", 302);
}

[LekoArts]

@ZeldOcarina The React Router docs only show returning it as also mentioned in this issue (remix-run/react-router#12335) so I'd need to ask them what is correct now. Or if either is fine.

[ZeldOcarina]

Oh I see.. maybe there's a difference with React Router..