Skip to content

Type error on generic form type with a field of type File #2145

@Jaime02

Description

@Jaime02

Describe the bug

Hello, I am trying to create a context for a generic AppForm.
If the form has a field which may be a JS File object, the following type error is shown:

error TS2322: Type 'AppFieldExtendedReactFormApi<{ firstName: string; formMode: FormMode; formFile: File | null; }, FormValidateOrFn<{ firstName: string; formMode: FormMode; formFile: File | null; }> | undefined, ... 11 more ..., {}>' is not assignable to type 'AppFieldExtendedReactFormApi<any, any, any, any, any, any, any, any, any, any, any, any, { readonly TextInput: ({ ...props }: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => Element; }, {}>'.
  Types of property 'pushFieldValue' are incompatible.
    Type '<TField extends never>(field: TField, value: (TField extends "formMode" | "firstName" | "formFile" | "formFile.text" | `formFile.text.${string}` | "formFile.name" | "formFile.size" | "formFile.type" | ... 9 more ... | `formFile.stream.${string}` ? DeepRecord<...>[TField] : never) extends any[] ? (any[] & (TField ext...' is not assignable to type '<TField extends never>(field: TField, value: any, options?: UpdateMetaOptions | undefined) => void'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'any' is not assignable to type 'never'.

Please see the stackblitz example for the full set up

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-zz8oewgu

Steps to reproduce

  1. Create a form with a field that may be a File
  2. Set up a context with a generic form (this is not straightforward, see discussion [feature request] Add new generic type to enable typing a generic AppForm #2144 )
  3. Passing the form instance to the form will show the type error

Expected behavior

No type error should be raised

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

  • Windows
  • Chrome

TanStack Form adapter

None

TanStack Form version

1.29.1

TypeScript version

6.0.2

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions