useSubmit must be used within a data router. (React Router 7)

[mjjabarullah]

When reloading the page in browser. Application error occur

[AlemTuzlak]

This usually happens when you have multiple react router versions in your project, check if you have any remix dependencies alongside your react-router

[mjjabarullah]

I have checked there is no remix dependencies.
package.json file contains
{
"name": "@jchat/remix-app",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": "react-router build",
"dev": "react-router --host",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc"
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-accordion": "^1.2.1",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.3",
"@radix-ui/react-visually-hidden": "^1.1.0",
"@rajesh896/broprint.js": "^2.1.1",
"@react-router/node": "^7.0.1",
"@react-router/serve": "^7.0.1",
"@tanstack/react-query": "^5.59.20",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"isbot": "^4.1.0",
"jotai": "^2.10.1",
"lucide-react": "^0.453.0",
"react": "^18.2.0",
"react-day-picker": "8.10.1",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-hook-form": "^7.53.2",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.3.0",
"react-router": "^7.0.1",
"redaxios": "^0.5.1",
"remix-hook-form": "^6.0.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
"usehooks-ts": "^3.1.0",
"zod": "^3.23.8"
},
"devDependencies": {
"@react-router/dev": "^7.0.1",
"@tanstack/eslint-plugin-query": "^5.60.1",
"@types/node": "^22.9.3",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"autoprefixer": "^10.4.19",
"eslint": "^8.38.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.38",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.4.4",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=20.0.0"
}
}

Screen.Recording.2024-11-24.154907.mp4

[AlemTuzlak]

Could you create a minimum repro? I'm not sure why this would happen

[mjjabarullah]

const form = useRemixForm({
mode: "onSubmit",
resolver,
defaultValues: {
name: undefined,
password: undefined,
siteId: site?.id,
},
reValidateMode: "onChange",
});

when i comment this code and reload the page is working good. there is no error.

[AlemTuzlak]

I'll try it out

[stilyng94]

@mjjabarullah have you found any solution?

[mjjabarullah]

@stilyng94 Not yet

[AlemTuzlak]

I'm looking into this tomorrow!

[AlemTuzlak]

I've pinpointed the issue to the <ServerRouter> from react-router, I'll communicate with the remix team to figure out the root cause as it's not on my side it seems. I'll get back to you asap!

A workaround for now is to wrap forms with but you probably don't want to do that as it skips server side rendering

[AlemTuzlak]

remix-run/react-router#12401
I have filed an issue on react-router, also talked to the team, they are off for the holidays, so please be patient!

[mzulfanw]

i got same issue in here

[AlemTuzlak]

It's an issue on react-router side, they released v7.0.2 that should fix it!

[hauptrolle]

It is still broken for me even in v7.0.2 😢

[AlemTuzlak]

did you upgrade ALL the react-router packages @hauptrolle ? I tried it out myself and it works now

[akoenig]

I can also confirm that it works with v7.0.2. Thanks a lot @AlemTuzlak for taking care of it.

[hauptrolle]

Are u guys on vite6 or vite5 ?

[AlemTuzlak]

Vite 5, vite 6 doesn't work yet with react-router from what I've heard and seen on their discord

[corygibbons]

@hauptrolle might be your node version. The fix wasn't working for me on node v23, but is working on v21 and v22. 🤷‍♂️

[hauptrolle]

@corygibbons Hmm I am on node v22.11.0

[AlemTuzlak]

@hauptrolle can you post your package json

[hauptrolle]

{
  "name": "frontend",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && safe-routes typegen && tsc --build --noEmit",
    "prepare": "husky"
  },
  "dependencies": {
    "@hookform/resolvers": "3.9.1",
    "@opentelemetry/sdk-node": "0.55.0",
    "@radix-ui/react-label": "2.1.0",
    "@radix-ui/react-slot": "1.1.0",
    "@react-router/node": "7.0.2",
    "@react-router/serve": "7.0.2",
    "class-variance-authority": "0.7.1",
    "clsx": "2.1.1",
    "ioredis": "5.4.1",
    "isbot": "5.1.17",
    "lucide-react": "0.464.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-hook-form": "7.53.2",
    "react-router": "7.0.2",
    "remix-hook-form": "6.0.0",
    "safe-routes": "1.0.0",
    "sha256": "0.2.0",
    "tailwind-merge": "2.5.5",
    "tailwindcss-animate": "1.0.7",
    "zod": "3.23.8"
  },
  "devDependencies": {
    "@commitlint/cli": "19.6.0",
    "@commitlint/config-conventional": "19.6.0",
    "@eslint/js": "9.16.0",
    "@react-router/dev": "7.0.2",
    "@trivago/prettier-plugin-sort-imports": "4.3.0",
    "@types/node": "20",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "@types/sha256": "0.2.2",
    "autoprefixer": "10.4.20",
    "eslint": "9.16.0",
    "husky": "9.1.7",
    "postcss": "8.4.49",
    "prettier": "3.4.1",
    "prettier-plugin-tailwindcss": "0.6.9",
    "tailwindcss": "3.4.15",
    "typescript": "5.7.2",
    "typescript-eslint": "8.17.0",
    "vite": "5.4.11",
    "vite-tsconfig-paths": "5.1.3"
  }
}

[hauptrolle]

Hot-reloading removes the error. But after a hard page reload is appears again.

[AlemTuzlak]

Can you maybe try clearing out node modules and removing the lock and installing again, maybe there's an issue there

[hauptrolle]

Did it already multiple times. Still same error. package-lock looks also good. All react-router packages are on 7.0.2. But if it works for you, it looks like an error on my side ...

[mjjabarullah]

After upgrading react-router package to 7.0.2. It is working for me. Thanks for your support @AlemTuzlak

[atarbalouti]

Did it already multiple times. Still same error. package-lock looks also good. All react-router packages are on 7.0.2. But if it works for you, it looks like an error on my side ...

Maybe try to use node v22 or lower, for me this was also the issue that I used node v23.

[mzulfanw]

remix-run/react-router#12401

still got the error, i following your guide

[hauptrolle]

Good to know that I am not the only one :)

[hauptrolle]

Even after an clean install like in your reproduction @AlemTuzlak I still get this error. On node v22.12.0 and react-router v.7.0.2. Did you manage to fix this @mzulfanw ?

[AlemTuzlak]

This is something that needs to be fixed on react-router side, I have nothing to do with the cause of it. Our best bet to get this working for everyone is to write on the linked issue on their side to get visibility on it.

[mzulfanw]

@hauptrolle I didn't manage to fix the problem

[AlemTuzlak]

remix-run/react-router#12475
here is another issue on top of the one you guys have been having, seems that it only works on some node versions.

[cemalokten]

I was having the same issue, but realised that the node version was only being set in the terminal window where I was running nvm. I ran nvm use 21 in the terminal window where I was running the project and it worked, I didn't realise nvm doesn't persist across the terminal windows.

n.b Only node 21 works, node 22 still returns the same error.