"`useSubmit` must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

brookslybrand · 2024-12-05T15:19:22Z

I'm using React Router as a...

framework

Reproduction

This is the same issue as #12399 and #12401. It specifically breaks if you're using the latest version of Node 22 (22.12)

I can't use StackBlitz since it doesn't let me set the Node version, so here we go:

Use the latest node version

Note: If I use v22.9.0, I do not get this error 🙃

nvm use v22.12.0

setup a new template

npx create-react-router@latest -y

Add remix-hook-form

npm i remix-hook-form

Call useRemixForm

// home.tsx

export default function Home() {
  const form = useRemixForm({});
  return <Welcome />;
}

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 93.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.7.1 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
    bun: 1.1.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.1
  npmPackages:
    @react-router/dev: 7.0.2 => 7.0.2 
    @react-router/node: 7.0.2 => 7.0.2 
    @react-router/serve: 7.0.2 => 7.0.2 
    react-router: 7.0.2 => 7.0.2 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

It should work (see #12437 for initial fix)

Actual Behavior

It does not

The text was updated successfully, but these errors were encountered:

zackperdue · 2024-12-13T10:03:43Z

What is the best way to get this to work? I tried npm and overrides and patch-package but I get this error:

ERROR: [plugin: vite:de
p-pre-bundle] Missing "./server" specifier in "react-router-dom"

MaxLardenois · 2024-12-13T10:18:01Z

What is the best way to get this to work? I tried npm and overrides and patch-package but I get this error:
ERROR: [plugin: vite:de
p-pre-bundle] Missing "./server" specifier in "react-router-dom"

It worked for by downgrading to Node v22.11.0

zackperdue · 2024-12-13T10:19:48Z

What is the best way to get this to work? I tried npm and overrides and patch-package but I get this error:
ERROR: [plugin: vite:de
p-pre-bundle] Missing "./server" specifier in "react-router-dom"
It worked for by downgrading to Node v22.11.0

I'm on v22.9.0

MrAlex94 · 2024-12-18T08:20:00Z

FWIW, I am facing a similar issue using Bun 1.1.40 + Clerk as mentioned in issue #12399.

brookslybrand · 2024-12-18T14:07:53Z

FWIW, I am facing a similar issue using Bun 1.1.40 + Clerk as mentioned in issue #12399.

@MrAlex94 I was not able to replicate this. Would you please list the steps or a link to a minimal reproduction?

zackperdue · 2024-12-18T17:51:44Z

I was able to get around this. Not exactly sure what fixed it, but I removed remix from the project and reinstalled fresh, then moved all my routes/business logic back in and it started working again.

Gusteg · 2024-12-19T21:54:25Z

The same issue occurs when you use React Router as a library together with the useLocation hook from a third-party library.

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 64.06 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.asdf/installs/nodejs/20.9.0/bin/node
    npm: 10.5.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 131.0.6778.204
    Safari: 17.5
  npmPackages:
    @react-router/dev: ^7.0.2 => 7.0.2 
    react-router: ^7.0.2 => 7.0.2 
    vite: ^5.0.11 => 5.4.11

MrGlox · 2024-12-19T22:16:18Z

After a considerable amount of investigation and testing, I had to migrate my project to the v7 router in various stages.

You'll need to follow all the steps in this link: https://reactrouter.com/upgrading/remix

For a useLocation problem, you need to install the react-router-dom library, which is not a direct react-router dependency (after multiple tests on my project).

Hope this helps, I'm working on node v22.12.

All my project's code is here: https://github.com/MrGlox/remix-nest-boilerplate it's a monorepo so look at the /apps/web folder. I'll switch all my useForm from @conform-to/react to remix-hook-form soon, but for now check the dashboard.account.subscription._index.tsx file for the integration.

Gusteg · 2024-12-20T10:06:32Z

After a considerable amount of investigation and testing, I had to migrate my project to the v7 router in various stages.

You'll need to follow all the steps in this link: https://reactrouter.com/upgrading/remix

For a useLocation problem, you need to install the react-router-dom library, which is not a direct react-router dependency (after multiple tests on my project).

Hope this helps, I'm working on node v22.12.

All my project's code is here: https://github.com/MrGlox/remix-nest-boilerplate it's a monorepo so look at the /apps/web folder. I'll switch all my useForm from @conform-to/react to remix-hook-form soon, but for now check the dashboard.account.subscription._index.tsx file for the integration.

Thanks for sharing your findings. Unfortunately, I’ve already followed these steps, and the outcome hasn’t changed—the issue with useLocation still persists. It appears the migration doesn’t resolve the underlying problem in my case.

MrAlex94 · 2024-12-20T11:37:45Z

@brookslybrand, here's a repro: https://github.com/MrAlex94/rr7-repro

Using Bun 1.1.40:

Oops!

useNavigate() may be used only in the context of a <Router> component.

Error: useNavigate() may be used only in the context of a <Router> component.
    at invariant (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:327:11)
    at useNavigateUnstable (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:4263:3)
    at useNavigate (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:4260:46)
    at useAwaitableNavigate (file:///Users/akontos/Workspace/repro/node_modules/@clerk/react-router/src/client/useAwaitableNavigate.tsx:8:20)
    at ClerkProviderBase (file:///Users/akontos/Workspace/repro/node_modules/@clerk/react-router/src/client/ReactRouterClerkProvider.tsx:36:29)
    at Object.react-stack-bottom-frame (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:8798:18)
    at renderWithHooks (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4722:19)
    at renderElement (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5157:23)
    at retryNode (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
    at renderNodeDestructive (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)

MrGlox · 2024-12-20T12:48:24Z

After a considerable amount of investigation and testing, I had to migrate my project to the v7 router in various stages.
You'll need to follow all the steps in this link: https://reactrouter.com/upgrading/remix
For a useLocation problem, you need to install the react-router-dom library, which is not a direct react-router dependency (after multiple tests on my project).
Hope this helps, I'm working on node v22.12.
All my project's code is here: https://github.com/MrGlox/remix-nest-boilerplate it's a monorepo so look at the /apps/web folder. I'll switch all my useForm from @conform-to/react to remix-hook-form soon, but for now check the dashboard.account.subscription._index.tsx file for the integration.

Thanks for sharing your findings. Unfortunately, I’ve already followed these steps, and the outcome hasn’t changed—the issue with useLocation still persists. It appears the migration doesn’t resolve the underlying problem in my case.

Have you added a new routes.ts file and updated remix() your vite.config.ts by reactRouter() ? Also added react-router.config.ts and updated entry.server with entry.client. The update / hydration part is really important because it change all the basic logic about routing in you project.

MrGlox · 2024-12-20T13:00:59Z

@brookslybrand, here's a repro: https://github.com/MrAlex94/rr7-repro

Using Bun 1.1.40:

Oops!

useNavigate() may be used only in the context of a <Router> component.

Error: useNavigate() may be used only in the context of a <Router> component.
    at invariant (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:327:11)
    at useNavigateUnstable (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:4263:3)
    at useNavigate (/Users/akontos/Workspace/repro/node_modules/react-router/dist/development/index.js:4260:46)
    at useAwaitableNavigate (file:///Users/akontos/Workspace/repro/node_modules/@clerk/react-router/src/client/useAwaitableNavigate.tsx:8:20)
    at ClerkProviderBase (file:///Users/akontos/Workspace/repro/node_modules/@clerk/react-router/src/client/ReactRouterClerkProvider.tsx:36:29)
    at Object.react-stack-bottom-frame (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:8798:18)
    at renderWithHooks (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4722:19)
    at renderElement (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5157:23)
    at retryNode (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
    at renderNodeDestructive (/Users/akontos/Workspace/repro/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)

renderToReadableStream wasn't working for me, I had to replace it by renderToPipeableStream in my case. Maybe think also to add a entry.client.tsx mainly with the hydrateRoot part.

brookslybrand · 2024-12-20T14:23:37Z

@MrGlox at first glance that seems unrelated. If you're able to get @MrAlex94's reproduction working that would be appreciated in helping us diagnose the issue/a fix

airjp73 · 2024-12-20T15:47:42Z

Hi!

An issue was reported for RVF that I think might be related to this. There's a reproduction in this issue if that helps with diagnosing this one.

The exact error message is different, but it looks like it could be the same root cause. It only happens on Node 22+ and is caused by calling a RR hook in a 3rd party library (RVF).

Error: useActionData must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.
    at invariant (file:///Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-router/dist/development/chunk-D52XG6IA.mjs:182:11)
    at useDataRouterState (file:///Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-router/dist/development/chunk-D52XG6IA.mjs:4488:3)
    at useActionData (file:///Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-router/dist/development/chunk-D52XG6IA.mjs:4544:15)
    at useErrorResponseForForm (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/@rvf/react-router/src/auto-server-hooks.tsx:13:22)
    at useServerValidationErrors (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/@rvf/react-router/src/auto-server-hooks.tsx:35:28)
    at Module.useForm (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/@rvf/react-router/src/useForm.tsx:71:23)
    at Home (/Users/aaronpettengill/dev/rvf-rr7-2/app/routes/home.tsx:20:16)
    at Object.react-stack-bottom-frame (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-dom/cjs/react-dom-server.node.development.js:8723:18)
    at renderWithHooks (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-dom/cjs/react-dom-server.node.development.js:4621:19)
    at renderElement (/Users/aaronpettengill/dev/rvf-rr7-2/node_modules/react-dom/cjs/react-dom-server.node.development.js:5056:23)

Since someone else mentioned Bun, I want to note that it also happens when using bun run dev, but only if I do nvm use 22 first, so the issue is still Node 22 related.

cemalokten · 2025-01-06T10:34:41Z

Any update on this?

brophdawg11 · 2025-01-08T17:00:59Z

Hey folks - can anyone confirm if the change in #12708 fixes your issue? You should be able to just edit the node_modules/react-router/package.json file directly and then run your app again. You may also need to delete any caches such as node_modules/.vite to get it to pick up on the change.

acelaya · 2025-01-08T18:27:43Z

Hey folks - can anyone confirm if the change in #12708 fixes your issue? You should be able to just edit the node_modules/react-router/package.json file directly and then run your app again. You may also need to delete any caches such as node_modules/.vite to get it to pick up on the change.

It works! 😄

I have tested it with node 22.12, 22.13 and 23.6, where I was able to reproduce the issue without this.

Just in case I also tested with node 22.10 to confirm it still works there as well.

wobsoriano · 2025-01-08T23:55:15Z

Hey folks - can anyone confirm if the change in #12708 fixes your issue? You should be able to just edit the node_modules/react-router/package.json file directly and then run your app again. You may also need to delete any caches such as node_modules/.vite to get it to pick up on the change.

It works on our side (Clerk React Router SDK issue) too! Tested with multiple versions from Node 20 to 22.13 🚀

heivo · 2025-01-09T13:38:51Z

Hey folks - can anyone confirm if the change in #12708 fixes your issue? You should be able to just edit the node_modules/react-router/package.json file directly and then run your app again. You may also need to delete any caches such as node_modules/.vite to get it to pick up on the change.

same here, the fix solves the issue for me 👍

xealot · 2025-01-09T14:03:01Z

I have a similar issue via airjp73/rvf#410, the solution that worked for me there is to lower the Vite version from 6.x to 5.x. Changing NodeJS and removing module-sync didn't have an effect.

airjp73 · 2025-01-09T17:46:17Z

Hey folks - can anyone confirm if the change in #12708 fixes your issue? You should be able to just edit the node_modules/react-router/package.json file directly and then run your app again. You may also need to delete any caches such as node_modules/.vite to get it to pick up on the change.

This fix works for me locally with the RVF issue.

markdalgleish · 2025-01-10T03:18:12Z

I've got a proposed fix for this in #12716.

I've published it as v0.0.0-experimental-4d16b23b6 for anyone who wants to try it out.

Note that you'll also need to override your React Router version globally in package.json so it's used as a peer dependency:

{
  // ...
  "overrides": {
    "react-router": "0.0.0-experimental-4d16b23b6"
  }
}

I've confirmed that this fixes the issue when reproducing via the steps @brookslybrand provided.

brookslybrand · 2025-01-10T15:23:22Z

@markdalgleish nice! This definitely solves the repo I had

I did some testing with other reproductions, and it looks like this one now fails on Node 20 and earlier versions of Node 22 🫠

The instructions are pretty simple, and I've gone ahead and created a reproduction on StackBlitz. The only problem with StackBlitz is it's still stuck on node 18, but I have confirmed it's the same issue that's happening on Node 20

wobsoriano · 2025-01-10T16:16:50Z

@markdalgleish can confirm that fixes our issue with our Clerk React Router SDK. Tried with Node v20, v22.11, v22.12, v22.13

"pnpm": {
  "overrides": {
    "react-router": "0.0.0-experimental-4d16b23b6"
  }
}

OriginalEXE · 2025-01-12T08:43:30Z

@markdalgleish Unlike the "manual" solution from @brophdawg11, react-router override with an experimental version did not seem to have an effect, still had the same issue 🤔 My issue is identical to airjp73/rvf#410

markdalgleish · 2025-01-13T09:35:46Z

I've got a fix that works for both the original issue and airjp73/rvf#410.

Turns out it's an issue with Vite not using the module-sync condition for SSR externals even though it's being used by Node. PR here: #12729. This is why the issue only shows in dev, not the production build.

If you want to try it out, I've published another experimental release as 0.0.0-experimental-5509a3c42.

brookslybrand · 2025-01-13T15:34:40Z

Awesome! Thank you so much @markdalgleish, this seems to solve all of the issues I have been able to reproduce including the last one I provided (updated with new package)

OriginalEXE · 2025-01-13T16:14:41Z

Unfortunately, the fix doesn't address the following conditions:

custom remix/react-router server
Node v22.12.0

With Node 18.x (on Stackblitz) works. With Node 22.x it works until a custom server is used. Link to a lightly modified Stackblitz by @brookslybrand : https://stackblitz.com/edit/github-3pczvtze-izn4h9ox?file=server.ts,package.json

Unfortunately there's no way to change Node.js version on Stackblitz

brookslybrand · 2025-01-13T16:42:08Z

Hmm, that's weird, thanks @OriginalEXE for pointing that out, I was able to reproduce.

This seems to be something specific to using tsx. I don't have an issue doing either of the following:

Switch the dev command to "dev": "node --experimental-strip-types ./server.ts"
Change server.ts to server.js

brookslybrand added the bug label Dec 5, 2024

brookslybrand mentioned this issue Dec 5, 2024

[bug] React Router v7 completely broke remix-hook-form #12401

Closed

AlemTuzlak mentioned this issue Dec 6, 2024

useSubmit must be used within a data router. (React Router 7) forge42dev/remix-hook-form#127

Open

brookslybrand mentioned this issue Dec 9, 2024

v7: useNavigate() may be used only in the context of a <Router> component #12399

Closed

airjp73 mentioned this issue Dec 20, 2024

[Bug]: Oops! useActionData must be used within a data router. On document load with useForm - on document initial load airjp73/rvf#410

Open

5 tasks

ZipBrandon mentioned this issue Dec 29, 2024

RR7 -useQueryState() yields Error: useNavigate() may be used only in the context of a <Router> component. 47ng/nuqs#831

Closed

LekoArts mentioned this issue Jan 6, 2025

Error after following RR7 quick start guide - useNavigate() may be used only in the context of a <Router> component clerk/javascript#4826

Closed

4 tasks

brophdawg11 linked a pull request Jan 8, 2025 that will close this issue

Remove module-sync from node exports map #12708

Open

markdalgleish mentioned this issue Jan 10, 2025

Move node export conditions into default #12716

Closed

markdalgleish mentioned this issue Jan 13, 2025

fix(dev): Use module-sync server condition when enabled #12729

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"`useSubmit` must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

"`useSubmit` must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

brookslybrand commented Dec 5, 2024 •

edited by pcattori

Loading

zackperdue commented Dec 13, 2024

MaxLardenois commented Dec 13, 2024

zackperdue commented Dec 13, 2024

MrAlex94 commented Dec 18, 2024

brookslybrand commented Dec 18, 2024

zackperdue commented Dec 18, 2024

Gusteg commented Dec 19, 2024

MrGlox commented Dec 19, 2024 •

edited

Loading

Gusteg commented Dec 20, 2024

MrAlex94 commented Dec 20, 2024

MrGlox commented Dec 20, 2024 •

edited

Loading

MrGlox commented Dec 20, 2024

brookslybrand commented Dec 20, 2024 •

edited

Loading

airjp73 commented Dec 20, 2024

cemalokten commented Jan 6, 2025

brophdawg11 commented Jan 8, 2025

acelaya commented Jan 8, 2025

wobsoriano commented Jan 8, 2025 •

edited

Loading

heivo commented Jan 9, 2025

xealot commented Jan 9, 2025

airjp73 commented Jan 9, 2025

markdalgleish commented Jan 10, 2025 •

edited

Loading

brookslybrand commented Jan 10, 2025

wobsoriano commented Jan 10, 2025 •

edited

Loading

OriginalEXE commented Jan 12, 2025 •

edited

Loading

markdalgleish commented Jan 13, 2025

brookslybrand commented Jan 13, 2025

OriginalEXE commented Jan 13, 2025 •

edited

Loading

brookslybrand commented Jan 13, 2025

"useSubmit must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

"useSubmit must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

Comments

brookslybrand commented Dec 5, 2024 • edited by pcattori Loading

I'm using React Router as a...

Reproduction

System Info

Used Package Manager

Expected Behavior

Actual Behavior

zackperdue commented Dec 13, 2024

MaxLardenois commented Dec 13, 2024

zackperdue commented Dec 13, 2024

MrAlex94 commented Dec 18, 2024

brookslybrand commented Dec 18, 2024

zackperdue commented Dec 18, 2024

Gusteg commented Dec 19, 2024

MrGlox commented Dec 19, 2024 • edited Loading

Gusteg commented Dec 20, 2024

MrAlex94 commented Dec 20, 2024

MrGlox commented Dec 20, 2024 • edited Loading

MrGlox commented Dec 20, 2024

brookslybrand commented Dec 20, 2024 • edited Loading

airjp73 commented Dec 20, 2024

cemalokten commented Jan 6, 2025

brophdawg11 commented Jan 8, 2025

acelaya commented Jan 8, 2025

wobsoriano commented Jan 8, 2025 • edited Loading

heivo commented Jan 9, 2025

xealot commented Jan 9, 2025

airjp73 commented Jan 9, 2025

markdalgleish commented Jan 10, 2025 • edited Loading

brookslybrand commented Jan 10, 2025

wobsoriano commented Jan 10, 2025 • edited Loading

OriginalEXE commented Jan 12, 2025 • edited Loading

markdalgleish commented Jan 13, 2025

brookslybrand commented Jan 13, 2025

OriginalEXE commented Jan 13, 2025 • edited Loading

brookslybrand commented Jan 13, 2025

"`useSubmit` must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

"`useSubmit` must be used within a data router" for 3rd party libraries on node 22.12.0 #12475

brookslybrand commented Dec 5, 2024 •

edited by pcattori

Loading

MrGlox commented Dec 19, 2024 •

edited

Loading

MrGlox commented Dec 20, 2024 •

edited

Loading

brookslybrand commented Dec 20, 2024 •

edited

Loading

wobsoriano commented Jan 8, 2025 •

edited

Loading

markdalgleish commented Jan 10, 2025 •

edited

Loading

wobsoriano commented Jan 10, 2025 •

edited

Loading

OriginalEXE commented Jan 12, 2025 •

edited

Loading

OriginalEXE commented Jan 13, 2025 •

edited

Loading