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}>
      <header className="flex items-center justify-center py-8 px-4">
        <SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </header>
      <main>
        <Outlet />
      </main>
    </ClerkProvider>
  );
}

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