remix-validated-form: [Bug]: npm i remix-validated-form fails in Remix V2

@airjp73 Just upgraded to 5.1.4-beta.3 and all forms in my project are working. Thank you!

I think I have a fix. Could you try version 5.1.4-beta.3 to see if that resolves the issue?

It sounds like the issue is resolved for everyone. 🎉

Please feel free to open another issue if the problem is still occurring in some cases.

Published the changes for 5.1.4-beta.3 as 5.1.5. This release also includes the fix for the issue @ahockersten just mentioned.

Likewise, just updated to 5.1.4 and it works. Thank you so much for releasing the patch.

I am tracking this issue as part of our own migration to Remix v2 stable. Post migration and installing v5.1.2 I get Error: useActionData must be used within a data router when using Validated Forms.

I am using forms withZod

Error: useActionData must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.
    at Object.invariant [as UNSAFE_invariant] (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/node_modules/@remix-run/router/history.ts:480:11)
    at useDataRouterState (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/node_modules/react-router/lib/hooks.tsx:780:3)
    at Object.useActionData (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/node_modules/react-router/lib/hooks.tsx:885:15)
    at useActionData (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/node_modules/@remix-run/react/dist/components.js:914:25)
    at useErrorResponseForForm (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/src/internal/hooks.ts:31:22)
    at ValidatedForm (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/remix-validated-form/src/ValidatedForm.tsx:265:24)
    at renderWithHooks (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (/Users/devraj/Work/Web/harvestos/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)

on a sample Login form:

import type { MetaFunction } from "@remix-run/node";

import {
  ValidatedForm,
  validationError
} from "remix-validated-form";

import { z } from 'zod';
import { withZod } from "@remix-validated-form/with-zod";

import { FormInput } from "../components/input";
import { SubmitButton } from "../components/submit-button";


export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};


const LoginSchema = withZod(
  z.object({
      email: z.string({
          required_error: "Email is required",
      }).email(),
      password: z.string().min(6, {
          message: "Your password isn't long enough",
      }),
      redirectTo: z.string().default("/admin"),
  }));


export default function Index() {
  return (
    <div>
      <h1 className="text-2xl">Welcome to Remix</h1>
      <ValidatedForm validator={LoginSchema} method="POST">
          <input type="hidden" name="redirectTo" value="/teacher" />
          <FormInput type="email" name="email" label="Email" />
          <FormInput type="password" name="password" label="Password" />
          <SubmitButton label="Login" />
      </ValidatedForm>

    </div>
  );
}

The above was a remix v2 app created from scratch and added Tailwind + Validated Forms to prove that the error was not something our original app was throwing.

I’ve published the source code to my sample app on Github.

Appreciate any pointers others have on this.

PS Thank you for the work towards making the library v2 compatible 🙏