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

setvik commented 1 year ago

Which packages are impacted?

[X] 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

Install Remix V2
```
npx create-remix@latest remix
```
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 commented 12 months ago

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 Screenshot 2023-09-21 at 11 30 55 AM

airjp73 commented 12 months ago

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 commented 12 months ago

Should be fixed in 5.1.2

devraj commented 12 months ago

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 commented 12 months ago

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

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 commented 12 months ago

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

setvik commented 12 months ago

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

devraj commented 11 months ago

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

ahockersten commented 11 months ago

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: https://github.com/airjp73/remix-validated-form/commit/b549d2803a463d138c3ecb509ca306f5d2c04376

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 commented 11 months ago

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 commented 11 months ago

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

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

<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 commented 11 months ago

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

caiofrota commented 11 months ago

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

airjp73 commented 11 months ago

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 commented 9 months ago

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

airjp73 / rvf