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

[bisxxal]

hii @rburgst can you assign this to me

[rburgst]

@bisxxal I have no permissions to assign issues

[bisxxal]

hii @tannerlinsley can you assign this to me

[electroheadfx]

I have the same issue with valibot or zod.

I can't set a validator to the onChange in validators : typescript error + runtime error (...incompatible between these types)

Note that validation work perfect with vanilla JS

T3 App v.7.37.0 with pages router / react-form 1.1.0 / typescript 5.7.2

[electroheadfx]

I replaced zod or valibot by ts-pattern lib, and it works great:

validators={{
    onChange: ({ value }) =>
      match(value)
        .with('', () => 'First name is required')
        .with(P.string.maxLength(3), () => 'First name must be at least 3 characters')
        .otherwise(() => undefined),
  }}

So the problem is the zod or valibot integrations in <=1.1.0 which is broken