Not assignable to parameter of type 'ZodType<any, ZodTypeDef, any>' error on toTypedSchema

[nhchoi98]

What happened?

• Typescript version: 5.4.5
• Vee-validate version: 4.12.7
• Zod version: 3.23.8

const validationSchema = toTypedSchema(testSchema);

When I pass the value through toTypedSchema

  const testSchema = z.object({
    email: z.string().email()
  });

I got this typescript error

Argument of type 'ZodObject<{ email: ZodString; }, "strip", ZodTypeAny, { email: string; }, { email: string; }>' is not assignable to parameter of type 'ZodType<any, ZodTypeDef, any>'.
  The types of '_def.errorMap' are incompatible between these types.ts(2345)

and, same on

  import { object } from 'zod';

  const testSchema = toTypedSchema(
    object({
      email: string().email()
    })
  );

This results below error, slowing down whole IDE.

Type instantiation is excessively deep and possibly infinite.ts(2589)

But, When I declare type and specify type when I use useForm like below

 import { toTypedSchema } from '@vee-validate/zod';
  import { useForm } from 'vee-validate';
  import { z } from 'zod';

  const validationSchema = z.object({
    email: z.string().email()
  });

  type Test = typeof validationSchema;

  const testSchema = toTypedSchema(validationSchema);


  const { errors } = useForm<Test>({ validationSchema: testSchema });

Type instantiation is excessively deep and possibly infinite.ts(2589), which result slowing down IDE disappear gone but still Argument of type 'ZodObject<{ email: ZodString; }, "strip", ZodTypeAny, { email: string; }, { email: string; }>' is not assignable to parameter of type 'ZodType<any, ZodTypeDef, any>'.
The types of '_def.errorMap' are incompatible between these types.ts(2345) error remains.

Reproduction steps

1. Add below codes.

  import { toTypedSchema } from '@vee-validate/zod';
  import { useForm } from 'vee-validate';
  import { z } from 'zod';

  const testSchema = toTypedSchema(
    z.object({
      email: string().email()
    })
  );

  const { errors } = useForm({ validationSchema: testSchema });

2. Additional experiments also doesn't work for me, (refer Add a computed ref in useForm that contains the submitted form data #4275)

  import { toTypedSchema } from '@vee-validate/zod';
  import { useForm } from 'vee-validate';
  import { z } from 'zod';

  const schema = z.object({
    email: z.string().min(1)
  });

  type Input = z.input<typeof schema>;
  type Output = z.infer<typeof schema>;

  const { values } = useForm({
    validationSchema: toTypedSchema<typeof schema, Output, Input>(schema)
  });

, result

Argument of type 'ZodObject<{ email: ZodString; }, "strip", ZodTypeAny, { email: string; }, { email: string; }>' is not assignable to parameter of type 'ZodType<any, ZodTypeDef, any>'.
  The types of '_def.errorMap' are incompatible between these types.ts(2345)

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

Code of Conduct

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

[nhchoi98]

I found that there's no error on below package.json cofiguration.

"vee-validate": "4.12.7"
"@vee-validate/zod": "4.10.8",
 "zod": "3.23.8",
"zod": "3.23.8",
"vue": "3.4.26",

[logaretm]

Might be a package mismatch, I tried installing zod, vee-validate and @vee-validate/zod latest versions and it works fine.

"@vee-validate/zod": "^4.12.8",
"vee-validate": "^4.12.8",
"zod": "^3.23.8",
"typescript": "^5.4.5"

Can you create a repo where this happens in it from scratch?

P.S I moved this to a discussion since it doesn't seem like an issue.