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

[setvik]

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

2. Attempt to install remix-validated-form

cd remix
npm i remix-validated-form

Expected behavior

remix-validated-form installs successfully

Screenshots or Videos

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

[tjuranek]

This is the breaking change in Remix v2 that's causing installation of this package to fail: https://remix.run/docs/en/main/start/v2#usetransition

[airjp73]

Seems like a pretty simple peer dep issue. Will push a fix shortly.

@tjuranek, we updated all those imports quite awhile ago. Have you tried upgrading to the latest version?

[airjp73]

Should be fixed in 5.1.2

[devraj]

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 🙏

[setvik]

Same issue here. Found these two other issues that appear to be related:

• [Bug]: Should add @remix-run/server-runtime #316
• [Bug]: useActionData cannot be mocked #317

TLDR from those issues: related to the fact that remix-validated-form is pulling in an old version of remix into its own node_modules directory and that conflicts with the project's version when that version is V2.

[airjp73]

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

[setvik]

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

[devraj]

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

[ahockersten]

I still have issues when trying to use 5.1.4 and remix 2.0.1, whenever i set a formId I get an error:

Error when rendering TypeError: Cannot read properties of undefined (reading '__rvfInternalFormDefaults_login-form')
    at useDefaultValuesFromLoader (/projectdir/node_modules/remix-validated-form/src/internal/hooks.ts:74:20)

This might be due to some issue on my end, but looking at this change:
b549d28

The change on line 73 will (apparently, which was a surprise to me) compile down to:
return (match == null ? void 0 : match.data)[dataKey];
which will fail if match is null.

In 5.1.3 this compiled to:
return match == null ? void 0 : match.data[dataKey];

So this should probably be changed to something along the lines of:
return match ? (match?.data as any)[dataKey] : undefined;

[airjp73]

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.

[caiofrota]

I'm getting this error even with my input inside my form

Error: Unable to determine form for useField. Please use it inside a ValidatedForm or pass a 'formId'.
at useInternalFormContext (http://localhost:3000/build/routes/login-477P4VG3.js:19799:9)
at useField (http://localhost:3000/build/routes/login-477P4VG3.js:19929:23)
at InputText (http://localhost:3000/build/routes/login-477P4VG3.js:20160:51)
at renderWithHooks (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:12171:26)
at mountIndeterminateComponent (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:14921:21)
at beginWork (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:15902:22)
at beginWork$1 (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:19749:22)
at performUnitOfWork (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:19194:20)
at workLoopSync (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:19133:13)
at renderRootSync (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:19112:15)

and getting this error in 5.1.5 if I wrap my input component in another component

Error: useActionData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
at invariant (http://localhost:3000/build/routes/login-QYNHKSSC.js:54:11)
at useDataRouterState (http://localhost:3000/build/routes/login-QYNHKSSC.js:581:19)
at useActionData2 (http://localhost:3000/build/routes/login-QYNHKSSC.js:622:15)
at useActionData3 (http://localhost:3000/build/routes/login-QYNHKSSC.js:18344:10)
at useErrorResponseForForm (http://localhost:3000/build/routes/login-QYNHKSSC.js:19809:22)
at useDefaultValuesForForm (http://localhost:3000/build/routes/login-QYNHKSSC.js:19844:25)
at useFieldDefaultValue (http://localhost:3000/build/routes/login-QYNHKSSC.js:19882:25)
at useField (http://localhost:3000/build/routes/login-QYNHKSSC.js:19930:24)
at InputText (http://localhost:3000/build/routes/login-QYNHKSSC.js:20160:51)
at renderWithHooks (http://localhost:3000/build/_shared/chunk-NMMBIYLZ.js:12171:26)

<ValidatedForm validator={validator} className="space-y-4 p-2 pt-4" method="post">
  <InputText
    id="username"
    type={"username"}
    name="username"
    maxLength={50}
    useValidator
  />
</ValidatedForm>

/* useValidator prop allows my component use the hook useField */
const { error, getInputProps } = useValidator ? useField(name) : { error: undefined, getInputProps: () => {} };

[airjp73]

Hi @caiofrota! Could you provide a minimal repo with a reproduction? Both of these issues are likely due to dependency resolution issues.

[caiofrota]

@airjp73 Thanks for the quick answer! I hadn't update the UI package. It's working like a charm!

[airjp73]

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.

[gonzarascon]

Hi y'all! I just had this same issue when upgrading to remix 2.4.0 with Vite 😢