TanStack / TanStack/form

formErrors.map(error) has broken type inference

Open
#1,325 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: types scope: react type: bug v1
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

Describe the bug
Image

The {error} of type void or undefined. This is directly highlighted in one of the examples: https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions

You can see right before it, the error is casted as a string or unknown however, this would be better solved in a case especially with mergeForm/server-validations.

I will try to trace back the code causing this and raise a PR.

Your minimal, reproducible example

https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions

Steps to reproduce

Download the project for highlighting of the type inference error.

Expected behavior

I would expect this to be similar to field-level error:

UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<{
    firstName: string;
    age: number;
}, "age", ({ value }: {
    value: number;
    fieldApi: FieldApi<{
        firstName: string;
        age: number;
    }, "age", number, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
}) => "Client validation: You must be at least 8" | undefined, ({ value }: {
    ...;
}) => void>>
How often does this bug happen?

Every time

Screenshots or Videos
Image
Platform

All.

TanStack Form adapter

react-form

TanStack Form version

v0.43.2 (form-core)

TypeScript version

v5.6.3

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the next-server-actions example linked in the issue and inspect the formErrors.map(error) type, then trace the mergeForm/server-validations types in the v0.43.2 form-core implementation. Done means the mapped error is inferred like the field-level error instead of void or undefined, with the example no longer showing the type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
developer-experience, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.