"{hook} may be used only in the context of a <Router> component" when running with vitest, node >=22.12 and there's a peer-dep on react-router

[acelaya]

I'm using React Router as a...

library

Reproduction

I created the minimum steps to reproduce in this repository: https://github.com/acelaya/peer-react-router-vitest

The readme includes the steps to reproduce the issue.

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Memory: 50.17 GB / 62.68 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.264
  npmPackages:
    react-router: ^7.1.3 => 7.1.3 
    vite: ^6.0.5 => 6.0.8

Used Package Manager

npm

Expected Behavior

It should be possible to depend on packages that have a peer dependency on react-router, and have no errors when running with vitest.

Actual Behavior

In short, if your project depends on react-router and a dependency which in turn has a peer-dependency on react router, when running with vitests, all imports from react-router inside that dependency will resolve a different instance than the ones in the root project, causing errors like useLocation() may be used only in the context of a <Router> component.

This issue was reported in #12475, but it was then closed as a solution was provided that solved it for other use cases, but the error still exists when running with vitest.

It also only affects node 22.12 and newer. Earlier versions work as expected. This can be seen in this GitHub workflow execution, from the repro repository above: https://github.com/acelaya/peer-react-router-vitest/actions/runs/12864662838

[EmiBemi]

I am facing the same issues after replacing react-router-dom with react-router v7.

[justinwaite]

This issue is present for me when using tsx to run a custom server in dev mode. When building and running in production, the issue is not present.

I've experimented with node 22.12 and 22.13, as well as vite 5 and vite 6. The issue persists across all of them. Using react-router 7.1.3.

The external package that I am using is @rvf/react-router

[justinwaite]

Removing module-sync in node_modules/react-router/package.json does resolve the issue for me.

[acelaya]

Removing module-sync in node_modules/react-router/package.json does resolve the issue for me.

True! I forgot to mention that in the description.

That's indeed what fixed it for me in the original issue #12475 (comment)

[MichaelvdVeer]

I am also facing the same issues with React Router v7 and Vite when using the new Clerk React Router SDK. Even when I use Node version 22.11 or lower, as well as Vite 5 and 6, I get this error message:

I'm using these dependencies:

  "dependencies": {
    "@chakra-ui/react": "^3.1.0",
    "@clerk/react-router": "^0.2.1",
    "@emotion/react": "^11.13.3",
    "@reduxjs/toolkit": "^2.3.0",
    "next-themes": "^0.3.0",
    "react": "^18.3.1",
    "react-avatar-editor": "^13.0.2",
    "react-dom": "^18.3.1",
    "react-dropzone": "^14.2.10",
    "react-headroom": "^3.2.1",
    "react-icons": "^5.3.0",
    "react-redux": "^9.1.2",
    "react-router": "^7.1.3",
    "react-use": "^17.5.1",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "vite": "^5.4.10",
    "vite-plugin-env": "^1.0.1"
  }

[MichaelvdVeer]

@justinwaite Do you mean i need to remove the module-sync line in node_modules/react-router/package.json ?

 "exports": {
    ".": {
      "node": {
        "types": "./dist/development/index.d.ts",
        "module-sync": "./dist/development/index.mjs",        <--------------- Remove this line
        "default": "./dist/development/index.js"
      },
      "import": {
        "types": "./dist/development/index.d.mts",
        "default": "./dist/development/index.mjs"
      },
      "default": {
        "types": "./dist/development/index.d.ts",
        "default": "./dist/development/index.js"
      }
    },
    "./route-module": {
      "import": {
        "types": "./dist/development/lib/types/route-module.d.mts"
      },
      "default": {
        "types": "./dist/development/lib/types/route-module.d.ts"
      }
    },
    "./dom": {
      "node": {
        "types": "./dist/development/dom-export.d.ts",
        "module-sync": "./dist/development/dom-export.mjs",        <--------------- Remove this line
        "default": "./dist/development/dom-export.js"
      },
      "import": {
        "types": "./dist/development/dom-export.d.mts",
        "default": "./dist/development/dom-export.mjs"
      },
      "default": {
        "types": "./dist/development/dom-export.d.ts",
        "default": "./dist/development/dom-export.js"
      }
    },
    "./package.json": "./package.json"
  },

And then delete the cache?

rm -rf node_modules/.vite 

[acelaya]

@MichaelvdVeer based on your description, it seems to me you are facing a different scenario. Perhaps you are in fact using the hook outside of a router.

[MichaelvdVeer]

Hi @acelaya,

Thanks for your reply!

I am using the ClerkProvider in main.jsx and then using createBrowserRouter in a separate file (AppRoutes.jsx). I’ve created a minimal reproduction of the issue, which you can find here: https://github.com/MichaelvdVeer/clerk-react-router-example.

Could you take a look at this and let me know if I’m missing something?

Thanks in advance! If needed, I will create a separate issue.

[acelaya]

If needed, I will create a separate issue.

Yes, please. Let's not derail the topic here.

[sergei-maertens]

My issue is very similar to this one, with some notable differences:

• Happens on Node 20
• Removing the dependency that has a peer dependency on react-router doesn't fix the problem

Removing module-sync in node_modules/react-router/package.json does resolve the issue for me.

This seems to work for me too! However, I don't see this happening with the peer dependency importing stuff - I'm importing from our own src/sdk.jsx in src/sdk.spec.jsx and this doesn't (shouldn't) hit the storybook addon at all.

edit - nope, doesn't seem to workaround the issue reliably :(

My environment:

  System:
    OS: Linux 6.12 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 24.67 GB / 30.58 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 10.0.0 - /usr/bin/pnpm
  Browsers:
    Brave Browser: 132.1.74.48
    Chromium: 132.0.6834.83
  npmPackages:
    react-router: ^7.1.3 => 7.1.3 
    vite: ^6.0.11 => 6.0.11 

Using vitest 3.0.3 and I also have the Storybook addon:

# npm list react-router
@open-formulieren/sdk@3.0.0 /home/bbt/code/open-forms-sdk
├── react-router@7.1.3
└─┬ storybook-addon-remix-react-router@4.0.1
  └── react-router@7.1.3 deduped

Traceback

Error: Uncaught [Error: useLocation() may be used only in the context of a <Router> component.]
    at reportException (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12) Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
Error handled by React Router default ErrorBoundary: Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27426:14)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
    at workLoopSync (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
Error handled by React Router default ErrorBoundary: Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27426:14)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
    at workLoopSync (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
Error: Uncaught [Error: useLocation() may be used only in the context of a <Router> component.]
    at reportException (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12) Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/home/bbt/code/open-forms-sdk/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
Error handled by React Router default ErrorBoundary: Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27426:14)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
    at workLoopSync (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
Error handled by React Router default ErrorBoundary: Error: useLocation() may be used only in the context of a <Router> component.
    at invariant (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:327:11)
    at useLocation (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:4229:3)
    at useSearchParams (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/index.js:7606:18)
    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:11:20)
    at renderWithHooks (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:20074:13)
    at beginWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:21587:16)
    at beginWork$1 (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:27426:14)
    at performUnitOfWork (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
    at workLoopSync (/home/bbt/code/open-forms-sdk/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
The above error occurred in the <App> component:

    at App (/home/bbt/code/open-forms-sdk/src/components/App.jsx:6:49)
    at RenderedRoute (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/dom-export.js:3701:26)
    at RenderErrorBoundary (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/dom-export.js:3660:5)
    at DataRoutes (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/dom-export.js:4114:3)
    at Router (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/dom-export.js:4121:13)
    at RouterProvider (/home/bbt/code/open-forms-sdk/node_modules/react-router/dist/development/dom-export.js:3944:11)
    at RouterProvider2
    at IntlProvider (/home/bbt/code/open-forms-sdk/node_modules/react-intl/src/components/provider.js:33:47)
    at I18NManager (/home/bbt/code/open-forms-sdk/src/i18n.jsx:46:9)
    at I18NErrorBoundary (/home/bbt/code/open-forms-sdk/src/i18n.jsx:80:5)
    at NonceProvider (/home/bbt/code/open-forms-sdk/node_modules/react-select/dist/react-select.cjs.dev.js:60:20)

Final edit: I'm probably using this wrong, because if I use RouterProvider not from react-router/dom then I don't have this issue - likely it's more related about running in jest-dom rather than a real browser.

[sergei-maertens]

@acelaya I think I've found the root cause - since I was able to use your repo to reproduce the issue and "fix" it by applying a workaround.

Looking at the bundles in node_modules/react-router/dist/development/ you find two separate .js bundles:

• dom-export.js
• index.js

Which are referred to from the package.json exports:

react-router/packages/react-router/package.json

Line 24 in 7a270cb

"exports": {

These are actual bundles, meaning that the RouterProvider components are defined in each of them, so they're separate JS objects in the runtime and that's the root cause of the problem. Whenever you use RouterProvider from react-router/dom it's supposed to wrap RouterProvider from react-router, but it's actually an entirely different copy. We import the hooks from react-router, so they're using pointing to different copies.

The ESM bundles (dom-export.mjs and index.mjs) don't have this problem, since they both import the shared API from the same chunk, meaning that RouterProvider in both is the same thing, and as such, so is the context it provides and the hook from the main package has access to the context of the react-router/dom wrapper RouterProvider.

You can verify this by editing node_modules/react-router/package.json and changing the references to the .js files to the .mjs files (just changing the extension is enough), and now everything works as expected.

Shell output after this modification:

➜  peer-react-router-vitest git:(main) npm run test                              

> peer-react-router-vitest@0.0.0 test
> vitest


 DEV  v3.0.2 /tmp/peer-react-router-vitest

stdout | test/DummyComponent.test.tsx > DummyComponent > fails to import correct router instance
{}

 ✓ test/DummyComponent.test.tsx (1 test) 16ms
   ✓ DummyComponent > fails to import correct router instance

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  12:07:11
   Duration  984ms (transform 58ms, setup 122ms, collect 222ms, tests 16ms, environment 359ms, prepare 85ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit