"Type instantiation is excessively deep and possibly infinite" when using Zod with React Hook Form and @hookform/resolvers

[jaus14]

When using zod, react-hook-form, and @hookform/resolvers, I encountered a TypeScript error:

Type instantiation is excessively deep and possibly infinite.

This happens when defining a schema with Zod and passing it to @hookform/resolvers/zod.

Steps to Reproduce

1. Define a schema:

   import { z } from "zod";
   
   const FormSchema = z.object({
     name: z.string(),
     loginId: z.string(),
     password: z.string(),
   })
   

2. Use it in useForm:

   import { useForm } from "react-hook-form";
   import { zodResolver } from "@hookform/resolvers/zod";
   
   const form = useFormz.infer<typeof FormSchema>>({
     resolver: zodResolver(schema),
   });
   

3. TypeScript throws an error:

   Type instantiation is excessively deep and possibly infinite.
   

I fix it by downgrading Zod

• Downgrading Zod from 3.42.2 to 3.42.1 resolved the issue.

Environment

• TypeScript: 5.3.3
• Zod: 3.42.2
• React Hook Form: 7.54.2
• @hookform/resolvers: 3.10.0

[paleite]

Running into the exact same issue

[antonius-dev]

I can confirm, the problems start yesterday, after upgrading from 3.24.1 to 3.24.2, downgrading solves the problem!

[VitAndrGuid]

@antonius-dev Thanks !

[0xPBIT]

Confirmed as well. Downgrading patch solved the issue for me.

[njacob1001]

Same issue!

[taylor-lindores-reeves]

In Turborepo we have a shared package which exports Schemas. Using the zodResolver(schema) I received an error "Type instantiation is excessively deep and possibly infinite" - Fixed by downgrading from [email protected] to [email protected] and restart TS server.

[TasseDeCafe]

@taylor-lindores-reeves thanks. Unfortunately the most minor patches often cause issues like that with zod.

[vtryun]

Thanks. The problem occurs when I use version 3.24.3.

[yleflour]

If you use yarn you can use yarn why zod to investigate. I found out that my issue was a mismatch between zod versions accross dependencies. I had to add "resolutions": {"zod": "<version_number>"} to my package.json to fix this.

My take is that external libraries should always be using zod as a peerDependency to avoid such conflicts.

[leonahold]

I have been using the zod version 3.23.8 and react-hook-form 7.51.5 for a while to not have this problem. However, when we attempt to update to nextjs 15 and react 19, we HAVE to update react-hook-form and thus run into this problem again.

Just like the simple schema of the OP, my schema is just:

const FormSchema = z.object({
  items: z.array(z.string()),
});

Which shouldn't be excessively deep and possibly infinite. Is there really no way to tell react hook form that he should just swallow this message as a warning?

[qizf7]

Running into the exact same issue

[qizf7]

If you use yarn you can use yarn why zod to investigate. I found out that my issue was a mismatch between zod versions accross dependencies. I had to add "resolutions": {"zod": "<version_number>"} to my package.json to fix this.

My take is that external libraries should always be using zod as a peerDependency to avoid such conflicts.

Thank you! @yleflour This solution works for me!

[healqq]

In our case it was a conflict of versions (we had 3.42.3 pinned but some eslint dependency brought 3.42.4). Bumping pinned version to 3.24.4 resolved the issue).

In case of pnpm running pnpm why zod will show what versions of zod are present.

[logemann]

also fixed it by downgrading to 3.24.2. No nerves to investigate more at this point.

[qcasey]

For me, downgrading to @hookform/[email protected] did the trick

[QuocZuong]

This works for me:

• Zod: 3.24.2
• React Hook Form: 7.54.2
• @hookform/resolvers: 4.1.3

[piszczu4]

The same issue here and package versions from @QuocZuong does not help :( Any suggestions?

[QuocZuong]

The same issue here and package versions from @QuocZuong does not help :( Any suggestions?

Just to be sure, have you deleted node_modules, package-lock, and npm cache?

[piszczu4]

Actually I need a react-hook-form ^7.57.0 to have subscription method. My packages are:

    "react-hook-form": "^7.57.0",
    "@hookform/resolvers": "^3.4.2",
    "zod": "^3.23.8"

I didnt remove package-lock beacuse I dont want to update my other packages (but I remove cache and node_modules). Now I switched to using FormProvider instead of passing control and errors to my form components and majority of errors disappeared but still some occurs when I use typed context. Here is the example:

  const { watch, trigger, control, setValue } =
    useFormContext<HomeworkSchemaType>();

  const {
    fields: answers,
    append,
    remove,
  } = useFieldArray({
    control,
    name: `exams.${index}.answers`,
  });

  const exam = watch(`exams.${index}`);

and using that watch is the reason of that error. Somilarly in other componets I use setValue and the error occurs:

 const schema = z.object({
    src: z
      .string()
      .optional()
      .refine((value) => !value || validateLink(value), {
        message: 'Nieprawidłowy link',
      }),
    file: file,
  });

  type SchemaType = z.infer<typeof schema>;

  const form = useForm<SchemaType>({
    resolver: zodResolver(schema),
    mode: 'all',
  });

  const {
    watch,
    handleSubmit,
    setFocus,
    setValue,
    trigger,
    formState: { isValid },
  } = form;

// on click handler in some component:
  setValue('file', toUploaderFile(res));

[piszczu4]

OK, the issue was with my custom schema like this:

export const file = z
  .custom<UploaderFile>()
  .refine((file) => {
    if (file?.uploading) return false;
    if (file?.id) return true;
  }, 'Plik jest wymagany');

where

export type UploaderFile = {
  file?: globalThis.File;
  src: string;
  extension: DefaultExtensionType;
  progress?: number;
  uploading?: boolean;
  name: string;
  size: number;
  id?: string;
  uploadedFile?: UploadedFile;
  controller?: AbortController;
};

I defined schema using z.object() and now it works :)

[MatteoGauthier]

Still got the issue, does someone have a fix ?

[SLey3]

@QuocZuong, package versions seemed to do the trick for me. I hope the developers read this issue and work on a fix for the latest versions.

For reference:

Zod: 3.24.2
React Hook Form: 7.54.2
@hookform/resolvers: 4.1.3

[sommeeeer]

Got the same issue here! Is this getting worked on?

[iatomic1]

Got the same issue here! Is this getting worked on?

were you able to fix it?

[sommeeeer]

were you able to fix it?

Yeah I pinned my versions to the one above. It was also related to caching, so I also added a ts-ignore for deployment. Locally it got resolved by pining versions to these ones:

"react-hook-form": "7.54.2",
"zod": "3.24.2",
"@hookform/resolvers": "4.1.3"

I also put them in the overrides field: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

We are using bun, but it should work the same on most package managers