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!