issue: hookform/resolvers no longer working with Zod v4?

[liljamesjohn]

Version Number

5.2.0

Codesandbox/Expo snack

N/A

Steps to reproduce

Versions:

• zod: 4.0.10
• react-hook-form: 7.61.1
• @hookform/resolvers: 5.2.0

Issue:
Helper function for easily working with react-hook-form and zod schemas was working perfectly fine with version 3+, but as soon as we upgraded to version 4 it is now outputting the following type error:

Type 'Resolver<input<T>, any, output<T>>' is not assignable to type 'Resolver<output<T>, any, output<T>>'.
  Types of parameters 'values' and 'values' are incompatible.
    Type 'output<T>' is not assignable to type 'input<T>'.
      Type 'unknown' is not assignable to type 'input<T>'.ts(2322)

(property) resolver?: Resolver<z.core.output<T>, any, TFieldValues> | undefined

Helper function code:

import { zodResolver } from "@hookform/resolvers/zod";
import { type UseFormProps, useForm } from "react-hook-form";
import type { z } from "zod";

export const useZodForm = <T extends z.ZodType<any, any>>(
  schema: T,
  options?: Omit<UseFormProps<z.infer<T>>, "resolver">,
) => {
  return useForm<z.infer<T>>({
    resolver: zodResolver(schema),
    ...options,
  });
};

Expected behaviour

Expect no type errors.

What browsers are you seeing the problem on?

No response

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[sohhamm]

It is working fine for me, this is the version

• "zod": "^4.0.10",
• "react-hook-form": "^7.61.1",

[sventore]

Seems to get this issue as soon as you use z.coerce, since z.coerce now infers all inputs as unknown.
Ref: https://zod.dev/v4/changelog?id=zcoerce-updates

This code gives typescript error on "resolver":

(all versions should be latest)

"@hookform/resolvers": "^5.2.0",
"zod": "^4.0.13",
"typescript": "^5.8.3",
"react-hook-form": "^7.61.1",

switch the two "height" properties and the types work.

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const MySchema = z.object({
    orderno: z.string().optional(),
    // height: z.number().optional(),
    height: z.coerce.number().optional(),
});

type FormValues = z.output<typeof MySchema>;

const Test = () => {
    const form = useForm<FormValues>({
        defaultValues: {
            // items: [],
        },
        resolver: zodResolver(MySchema),
    });

    return <div></div>;
};

[inspiraller]

I have a polyfill which works for the moment.
https://github.com/inspiraller/react-zod-next-intl/blob/main/src/zod/zodResolver.ts

[romankoho]

I have the same issue as soon as I want to use coerce on a property.

[anuj9196]

I am also facing same issue. I am not using z.coerce but there are many forms and couldn't get which form is causing error

../../node_modules/.pnpm/@hookform+resolvers@5.2.1_react-hook-form@7.61.1_react@19.1.1_/node_modules/@hookform/resolvers/zod/dist/zod.mjs:1:127
Module not found: Package path ./v4/core is not exported from package /Users/anuj/code/personal/app/my-app/node_modules/.pnpm/node_modules/zod (see exports field in /Users/anuj/code/personal/app/my-app/node_modules/.pnpm/node_modules/zod/package.json)
> 1 | import{validateFieldsNatively as r,toNestErrors as e}from"@hookform/resolvers";import{appendErrors as o}from"react-hook-form";import*as n from"zod/v4/core";function t(r,e){try{var o=r()}catch(r){return e(r)}return o&&o.then?o.then(void 0,e):o}function s(r,e){for(var n={};r.length;){var t=r[0],s=t.code,i=t.message,a=t.path.join(".");if(!n[a])if("unionErrors"in t){var u=t.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code}}else n[a]={message:i,type:s};if("unionErrors"in t&&t.unionErrors.forEach(function(e){return e.errors.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[t.code];n[a]=o(a,e,n,s,f?[].concat(f,t.message):t.message)}r.shift()}return n}function i(r,e){for(var n={};r.length;){var t=r[0],s=t.code,i=t.message,a=t.path.join(".");if(!n[a])if("invalid_union"===t.code&&t.errors.length>0){var u=t.errors[0][0];n[a]={message:u.message,type:u.code}}else n[a]={message:i,type:s};if("invalid_union"===t.code&&t.errors.forEach(function(e){return e.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[t.code];n[a]=o(a,e,n,s,f?[].concat(f,t.message):t.message)}r.shift()}return n}function a(o,a,u){if(void 0===u&&(u={}),function(r){return"_def"in r&&"object"==typeof r._def&&"typeName"in r._def}(o))return function(n,i,c){try{return Promise.resolve(t(function(){return Promise.resolve(o["sync"===u.mode?"parse":"parseAsync"](n,a)).then(function(e){return c.shouldUseNativeValidation&&r({},c),{errors:{},values:u.raw?Object.assign({},n):e}})},function(r){if(function(r){return Array.isArray(null==r?void 0:r.issues)}(r))return{values:{},errors:e(s(r.errors,!c.shouldUseNativeValidation&&"all"===c.criteriaMode),c)};throw r}))}catch(r){return Promise.reject(r)}};if(function(r){return"_zod"in r&&"object"==typeof r._zod}(o))return function(s,c,f){try{return Promise.resolve(t(function(){return Promise.resolve(("sync"===u.mode?n.parse:n.parseAsync)(o,s,a)).then(function(e){return f.shouldUseNativeValidation&&r({},f),{errors:{},values:u.raw?Object.assign({},s):e}})},function(r){if(function(r){return r instanceof n.$ZodError}(r))return{values:{},errors:e(i(r.issues,!f.shouldUseNativeValidation&&"all"===f.criteriaMode),f)};throw r}))}catch(r){return Promise.reject(r)}};throw new Error("Invalid input: not a Zod schema")}export{a as zodResolver};
    |                                                                                                                               ^
  2 | //# sourceMappingURL=zod.module.js.map
  3 |

using packages

"dependencies": {
    "@hookform/resolvers": "^5.2.1",
    "framer-motion": "^12.23.12",
    "import-in-the-middle": "^1.14.2",
    "lucide-react": "^0.475.0",
    "next": "^15.4.5",
    "next-themes": "^0.4.4",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-hook-form": "^7.61.1",
    "zod": "^4.0.14"
  }

[anuj9196]

I tried to create a minimal reproducible example so set up a new nextjs monorepo project using steps

1. Initialize project

pnpm dlx shadcn@canary init

2. Add required components

pnpm dlx shadcn@canary add button
pnpm dlx shadcn@canary add form
pnpm dlx shadcn@canary add input

This installs @hookform/resolvers, zod, and react-hook-form insite the packages directory. Since, these dependencies are also required in the apps/web project, installed them globally like

pnpm add @hookform/resolvers zod react-hook-form --workspace-root

3. Add the following code to the root page.tsx file

"use client";
import { Button } from "@workspace/ui/components/button"
import {z} from "zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@workspace/ui/components/form";
import {ControllerRenderProps, useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import {Input} from "@workspace/ui/components/input";
import {useEffect, useState} from "react";


const FormSchema = z.object({
  name: z.string(),
})

export default function Page() {

  const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);

  useEffect(() => {
    console.log('showDeleteConfirm state:', showDeleteConfirm);
    setShowDeleteConfirm(true);
  }, []);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

  const handleSubmit = (data: z.infer<typeof FormSchema>) => {
    console.log("Form submitted with data:", data);
  }

  return (
    <div className="flex items-center justify-center min-h-svh">
      <div className="flex flex-row items-center justify-center gap-4">
        <h1 className="text-2xl font-bold">Hello World</h1>

        <Form {...form}>
          <form {...form} onSubmit={form.handleSubmit(handleSubmit)}>
            <FormField
                control={form.control}
                name="name"
                render={({field}: { field: ControllerRenderProps<z.infer<typeof FormSchema>, "name"> }) => (
                  <FormItem>
                    <FormLabel>Form Title</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter form title" {...field} />
                    </FormControl>
                    <FormDescription>
                      This title will be displayed at the top of your form
                    </FormDescription>
                    <FormMessage/>
                  </FormItem>
                )}
              />

            <Button size="sm" className="bg-red-500">Button</Button>
          </form>
        </Form>
      </div>
    </div>
  )
}

4. Build the project by running

cd apps/web
pnpm run build

5. The build fails with error

> web@0.0.1 build /Users/anuj/code/personal/my-app/apps/web
> next build

   ▲ Next.js 15.2.3

   Creating an optimized production build ...
Failed to compile.

../../node_modules/.pnpm/@hookform+resolvers@5.2.1_react-hook-form@7.62.0_react@19.0.0_/node_modules/@hookform/resolvers/zod/dist/zod.mjs
Module not found: Package path ./v4/core is not exported from package /Users/anuj/code/personal/my-app/node_modules/.pnpm/node_modules/zod (see exports field in /Users/anuj/code/personal/my-app/node_modules/.pnpm/node_modules/zod/package.json)

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/page.tsx


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

NOTE: The error is happening with and after @hookform/resolvers@5.1.1. Downgrading to 5.1.0 works fine with build

[crrobinson14]

There seem to be a few separate issues reported in this thread. Hopefully I'm posting in the right spot - ours seems to be related to the original issue rather than those reported further down (although perhaps they're related). But here are a few data points that may help?

1. We tried upgrading to Zod v4 (4.0.14) while staying on Resolver v4 (4.1.3). On a form with a simple validation like z.object({ name: z.string()}) this works. But if you chain additional rules such as z.object({ name: z.string().trim().min(3).max(50)}) this throws an Uncaught Promise. The context of the promise contains the error so it seems as if Resolvers v4 isn't handling some change in the way Zod v4 throws errors now. Perhaps this is expected although in this case I would expect a note in the docs somewhere that tells devs Zod v4 requires Resolvers v5. (If so we would be happy to throw in a quick PR to enhance that doc section, but wanted to confirm here first.)

2. We then upgrade to Resolvers v5 (5.2.1). This eliminates the Uncaught Promise exception. However, we seem to be able to reproduce the issues reported by others above where certain Zod pipeline operations such as coerce create type errors, probably because of https://zod.dev/v4/changelog?id=zcoerce-updates? We quickly tested the workaround posted above in issue: hookform/resolvers no longer working with Zod v4? #799 (comment) and it appears to fix this but we don't need it for our use case so we haven't fully QA'd or reviewed it ourselves.

[Sparticuz]

Looks like we need to specify the input type now when using coercion.

colinhacks/zod#5010 (comment)

[crrobinson14]

So maybe just a doc update for now with an example of this as an early clue to devs to avoid them asking here?