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

Which packages are impacted?

  • remix-validated-form
  • @remix-validated-form/with-zod
  • @remix-validated-form/with-yup
  • zod-form-data

What version of these packages are you using?

  • ‘remix-validated-form’: ^5.1.0

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

https://github.com/setvik/remix-validated-form-remixv2-install-fail

Steps to Reproduce the Bug or Issue

  1. Install Remix V2
npx create-remix@latest remix
  1. Attempt to install remix-validated-form
cd remix
npm i remix-validated-form

Expected behavior

remix-validated-form installs successfully

Screenshots or Videos

image

Platform

System: OS: macOS 13.5.2 CPU: (8) arm64 Apple M2 Memory: 134.33 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm pnpm: 8.6.2 - ~/.nvm/versions/node/v20.3.0/bin/pnpm Browsers: Chrome: 116.0.5845.187 Edge: 117.0.2045.31 Safari: 16.6 npmPackages: @remix-run/css-bundle: ^2.0.0 => 2.0.0 @remix-run/dev: ^2.0.0 => 2.0.0 @remix-run/eslint-config: ^2.0.0 => 2.0.0 @remix-run/node: ^2.0.0 => 2.0.0 @remix-run/react: ^2.0.0 => 2.0.0 @remix-run/serve: ^2.0.0 => 2.0.0 @types/react: ^18.2.20 => 18.2.21 @types/react-dom: ^18.2.7 => 18.2.7 eslint: ^8.38.0 => 8.49.0 isbot: ^3.6.8 => 3.6.13 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.1.6 => 5.2.2

Additional context

I assume the peer and dev dependencies need to be updated

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 4
  • Comments: 15 (6 by maintainers)

Most upvoted comments

@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 🙏