bug: incompatibility issue between react form hook and zod resolver while using schema

[Anmol-Baranwal]

The error is caused by:

const profileFormSchema = z.object({
  username: z
    .string()
    .min(3, {
      message: 'Username must be at least 3 characters.',
    })
    .max(20, {
      message: 'Username must not be longer than 20 characters.',
    }),
  email: z
    .string({
      required_error: 'Please select an email to display.',
    })
    .email(),
  bio: z.string().max(160).min(4),
  urls: z
    .array(
      z.object({
        value: z.string().url({ message: 'Please enter a valid URL.' }),
      })
    )
    .optional(),
})

type ProfileFormValues = z.infer<typeof profileFormSchema>

const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues,
    mode: 'onChange',
  })

Argument of type 'ZodObject<{ username: ZodString; email: ZodString; bio: ZodString; urls: ZodOptional<ZodArray<ZodObject<{ value: ZodString; }, "strip", ZodTypeAny, { value: string; }, { ...; }>, "many">>; }, "strip", ZodTypeAny, { ...; }, { ...; }>' is not assignable to parameter of type 'ZodType<any, any, any>'.
  The types of 'refine(...)._def.typeName' are incompatible between these types.
    Type 'import("E:/anu/Web Development/Git Clone/UIVerse/node_modules/.pnpm/zod@3.22.2/node_modules/zod/lib/types").ZodFirstPartyTypeKind.ZodEffects' is not assignable to type 'Zod.ZodFirstPartyTypeKind.ZodEffects'.
      Property 'ZodReadonly' is missing in type 'Zod.ZodFirstPartyTypeKind'.ts(2345)
const profileFormSchema: z.ZodObject<{
    username: z.ZodString;
    email: z.ZodString;
    bio: z.ZodString;
    urls: z.ZodOptional<z.ZodArray<z.ZodObject<{
        value: z.ZodString;
    }, "strip", z.ZodTypeAny, {
        value: string;
    }, {
        value: string;
    }>, "many">>;
}, "strip", z.ZodTypeAny, {
    ...;
}, {
    ...;
}>

• I went to their respective repositories, but was unable to find solution for my problem. I want to use zod for validation but I've no clue on how to fix this typescript error.

Any help would be appreciated.

[Anmol-Baranwal]

zod@3.21.4 and @hookform/resolvers: ^3.3.1 will fix this issue.

npm install zod@3.21.4

Make sure to reload the window, it will work.

I'm not closing the issue, in case someone faces the same issue.

[Anmol-Baranwal]

You can refer to the official docs. I would have to see since I encountered this using shadcn, and it's pretty good.

I will let you know by the end of the week, if I get this :)

Just don't wait. Refer to official docs.

[ninoM]

zod@3.21.4 and @hookform/resolvers: ^3.3.1 will fix this issue.

npm install zod@3.21.4

Make sure to reload the window, it will work.

I'm not closing the issue, in case someone faces the same issue.

Do you have a link to the source in any of the other projects repos to why this fixes it? Would like to keep track.

I think this is it for anyone else interested.

UPDATE: Latest solution in the issue linked above; all I had to do to get it working without needing to downgrade was to remove node_modules, then do

pnpm store prune && pnpm install

This worked for me after reloading windows in VS Code.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.