Error after following RR7 quick start guide - useNavigate() may be used only in the context of a <Router> component #4826
Comments
sanisoclem
added
the
needs-triage
|
I was just migrating one of my repos to rr7 and Happy to provide more information / reproductions if necessary. |
|
See here: #4641 (comment) Temporarily downgrading Vite from v6 to v5 also worked for me. |
|
We had the same issue, downgrading Node from 22.12 to 22.11 seemed to resolve. |
I downgraded to node v20.18.1 using nvm and it fixed the issue. |
the repro is using
Thanks, this also worked for the app I am migrating. Had an issue with the minimal repro though - the example given in step 4 of the guide says:
when clicking on the sign in button, it doesn't redirect to the account portal hosted signin page. Instead it gets redirected to: To make it work, had to create the import { SignIn } from '@clerk/react-router';
export default function SignInPage() {
return (
<div
style={{
backgroundImage: 'url(/bg.svg)',
backgroundPosition: 'center',
backgroundSize: 'cover'
}}
className="flex h-screen w-screen items-center justify-center"
>
<SignIn routing="path" path="/signin" />
</div>
);
}and update import { type RouteConfig, index, route } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("signin", "routes/signin.tsx"),
] satisfies RouteConfig; |
LekoArts
removed
the
needs-triage
|
Hi, this is an upstream issue with React Router and is tracked at remix-run/react-router#12475. Most often downgrading the Node.js version helped. Please follow that upstream issue for a resolution. |
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://github.com/sanisoclem/clerk-rr7-repro
Publishable key
Description
Starting a new RR7 project and following the clerk guide doesn't produce a working app. The page errors out with:
A few things I have tried:
ClerkProviderto layout - same outcomeSteps to reproduce:
npx create-react-router@latest my-react-router-apppnpm add @clerk/react-routerroot.tsxto userootAuthLoader()root.tsx's default exportAppand wrapOutletwithClerkProviderExpected behavior:
To be redirected to login page
Actual behavior:
Error is shown:
Environment
System: OS: Windows 11 10.0.26100 CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor Memory: 36.24 GB / 63.14 GB Binaries: Node: 22.12.0 - C:\Program Files\nodejs\node.EXE npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.15.0 - C:\Program Files\nodejs\pnpm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.26100.1882 npmPackages: @clerk/react-router: ^0.1.5 => 0.1.5 @react-router/dev: ^7.1.0 => 7.1.0 @react-router/node: ^7.1.0 => 7.1.0 @react-router/serve: ^7.1.0 => 7.1.0 @types/node: ^20 => 20.17.10 @types/react: ^19.0.1 => 19.0.2 @types/react-dom: ^19.0.1 => 19.0.2 autoprefixer: ^10.4.20 => 10.4.20 cross-env: ^7.0.3 => 7.0.3 isbot: ^5.1.17 => 5.1.18 postcss: ^8.4.49 => 8.4.49 react: ^19.0.0 => 19.0.0 react-dom: ^19.0.0 => 19.0.0 react-router: ^7.1.0 => 7.1.0 tailwindcss: ^3.4.16 => 3.4.17 typescript: ^5.7.2 => 5.7.2 vite: ^5.4.11 => 5.4.11 vite-tsconfig-paths: ^5.1.4 => 5.1.4The text was updated successfully, but these errors were encountered: