Typescript types dont work out in next.js and valibot

[rburgst]

Describe the bug

when using valibot together with next.js server actions the typescript types dont seem to work out.

1. typing issues in useForm together with useTransform.

   Argument of type '{ defaultValues: { firstName: string; age: number; }; transform: FormTransform<any, any, any, any, any, any, any, any, any, any>; validators: { onBlur: ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<...>; }, undefined>; }; }' is not assignable to parameter of type 'FormOptions<{ firstName: string; age: number; }, FormValidateOrFn<{ firstName: string; age: number; }> | undefined, FormValidateOrFn<{ firstName: string; age: number; }> | undefined, ... 6 more ..., unknown>'.
   The types of 'validators.onBlur' are incompatible between these types.
   Type 'ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<[UnknownSchema, TransformAction<any, number>]>; }, undefined>' is not assignable to type 'FormValidateOrFn<{ firstName: string; age: number; }> | undefined'.
     Type 'ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<[UnknownSchema, TransformAction<any, number>]>; }, undefined>' is not assignable to type 'StandardSchemaV1<{ firstName: string; age: number; }, unknown>'.
       The types of ''~standard'.types' are incompatible between these types.
         Type 'StandardTypes<{ firstName: string; age: unknown; }, { firstName: string; age: number; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ firstName: string; age: number; }, unknown> | undefined'.
           Type 'StandardTypes<{ firstName: string; age: unknown; }, { firstName: string; age: number; }>' is not assignable to type 'StandardSchemaV1Types<{ firstName: string; age: number; }, unknown>'.
             The types of 'input.age' are incompatible between these types.
               Type 'unknown' is not assignable to type 'number'.ts(2345)
   

   (see client-component.tsx)

2. it is inconvenient to use server-validate together with a validation library as you have to basically do the parsing 2x.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-v5zvgtdi?file=src%2Fapp%2Fclient-component.tsx

Steps to reproduce

1. try to compile the project with pnpm build

2. see the compiler error in client-component.ts

   Argument of type '{ defaultValues: { firstName: string; age: number; }; transform: FormTransform<any, any, any, any, any, any, any, any, any, any>; validators: { onBlur: ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<...>; }, undefined>; }; }' is not assignable to parameter of type 'FormOptions<{ firstName: string; age: number; }, FormValidateOrFn<{ firstName: string; age: number; }> | undefined, FormValidateOrFn<{ firstName: string; age: number; }> | undefined, ... 6 more ..., unknown>'.
   The types of 'validators.onBlur' are incompatible between these types.
   Type 'ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<[UnknownSchema, TransformAction<any, number>]>; }, undefined>' is not assignable to type 'FormValidateOrFn<{ firstName: string; age: number; }> | undefined'.
     Type 'ObjectSchema<{ readonly firstName: StringSchema<undefined>; readonly age: SchemaWithPipe<[UnknownSchema, TransformAction<any, number>]>; }, undefined>' is not assignable to type 'StandardSchemaV1<{ firstName: string; age: number; }, unknown>'.
       The types of ''~standard'.types' are incompatible between these types.
         Type 'StandardTypes<{ firstName: string; age: unknown; }, { firstName: string; age: number; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ firstName: string; age: number; }, unknown> | undefined'.
           Type 'StandardTypes<{ firstName: string; age: unknown; }, { firstName: string; age: number; }>' is not assignable to type 'StandardSchemaV1Types<{ firstName: string; age: number; }, unknown>'.
             The types of 'input.age' are incompatible between these types.
               Type 'unknown' is not assignable to type 'number'.ts(2345)
   

Expected behavior

It should compile

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Mac, Linux
• Browser: all

TanStack Form adapter

react-form

TanStack Form version

1.0.5

TypeScript version

5.8.2

Additional context

see stackblitz

Basically the example is an upgraded version from the standard next.js server actions example