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

[blorenz]

Which packages are impacted?

• @rvf/react
• @rvf/react-router
• @rvf/zod
• @rvf/yup
• zod-form-data

What version of these packages are you using?

 "@react-router/serve": "^7.0.2",
 "@rvf/core": "^7.0.1",
 "@rvf/react-router": "^7.0.1",
 "@rvf/zod": "^7.0.1",
 "react": "^19.0.0",
 "react-dom": "^19.0.0",
 "react-router": "^7.0.2"

Please provide a link to a minimal reproduction of the issue.

copy and paste in steps to reproduce

Steps to Reproduce the Bug or Issue

1. npx create-react-router@latest rvf-rr7
2. install latest rvf
3. Replace home.tsx with this content:

import type { Route } from "./+types/home";
import { Form } from 'react-router';
import { useForm } from '@rvf/react-router';
import { withZod } from '@rvf/zod';
import { z } from 'zod';

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export async function action({
  request,
}: Route.ActionArgs) {
  let formData = await request.formData();
  return "hello world";
}
export default function Home() {
  const id = 'test';
  const form = useForm({
    id,
    validator: withZod(z.object({})),
    defaultValues: {},
    method: 'POST',
  });
  return <div className={"flex flex-col gap-y-8"}>
    <Form {...form.getFormProps()} />
  </div>;
}

4. Navigate to home on a document load and receive error.

Expected behavior

I would expect the page to render on document initial load.

Screenshots or Videos

No response

Platform

macOS, Chrome, latest

Additional context

No response

[airjp73]

Hi!

The issue doesn't reproduce when I follow those steps. Could you provide a Code sandbox (or similar) instead that contains the issue?

[ZipBrandon]

@airjp73 I attempted to recreate with Stackblitz even though they only have node 18 and RR needs 20. It worked as expected. I then tested against node 20 and node 22 locally. The issue is node 23 it seems. I'll rollback to node 22 personally.

I wonder why rr7/other libs worked fine with 23 and rvf had an issue?

[airjp73]

Thanks for looking into that! My best guess is a change to dependency resolution in npm somehow causing rvf to resolve a different version of RR than the rest of the app. But I won't have time to test that hypothesis until at least tomorrow.

What happens when you npm ls react-router on node 23?

[ZipBrandon]

Unfortunately ,it is all rr 7.0.2.

│ └── [email protected] deduped
├─┬ @react-router/[email protected]
│ └── [email protected] deduped
├─┬ @react-router/[email protected]
│ ├─┬ @react-router/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @rvf/[email protected]
│ └── [email protected] deduped
└── [email protected]

[airjp73]

The react-router repo has an issue here that looks related. I was also able to reproduce on Node 22 and up, which lines up with what they report in this issue.

[miran248]

Don't know, what's causing the error but i solved it by downgrading vite from 6.0.6 to 5.4.11 (all other deps are latest).

[xealot]

I had this issue as well, moving Vite from 6.x to 5.x like @miran248 also fixed it for me.

[vrn-hkz]

Updating to node v22.13.0 fixed this for me. My package.json:

"dependencies": {
		"@react-router/node": "^7.1.1",
		"@react-router/serve": "^7.1.1",
		"@rvf/react-router": "^7.0.1",
		"@rvf/zod": "^7.0.1",
		"isbot": "^5.1.21",
		"react": "^19.0.0",
		"react-dom": "^19.0.0",
		"react-router": "^7.1.1",
		"zod": "^3.24.1"
	},
	"devDependencies": {
		"@react-router/dev": "^7.1.1",
		"@types/bun": "latest",
		"@types/node": "^22",
		"@types/react": "^19.0.4",
		"typescript": "^5.7.3",
		"vite": "^6.0.7",
		"vite-tsconfig-paths": "^5.1.4"
	},