Server validation errors not working in Remix example

[dlindahl]

Describe the bug

While researching how to get server-side validation errors into my form state via a React Router, I came across the Remix example. While I can see what the server-side code is intending to do (useTransform with mergeForm), the merged form state is never realized in the FormApi instance. Or rather it is, briefly, but some other render cycle is resetting the state of the form such that the server-side errors disappear.

Having this example fixed would make understanding the intended use of @tanstack/react-form with React Router's action loaders because, if I understand #623 correctly, validators.onSubmit is intended to return server-side errors but I don't think that is compatible with how React Router's action loaders work since their submit function does not return a value with which to parse the error response.

Your minimal, reproducible example

https://tanstack.com/form/latest/docs/framework/react/examples/remix

Steps to reproduce

1. Go to https://tanstack.com/form/latest/docs/framework/react/examples/remix
2. Increase the age field's value from 0 to 1, etc and see the client-side validation error messages render (i.e. "Client validation: You must be at least 8")
3. Increase the age to between 8 and 12 and the client-side validation errors go away.
4. Click "Submit"
5. Notice there are no server-side validation errors rendered even though the form submission failed because the server requires the age to be less than 12.

Expected behavior

I would expect:

    transform: useTransform(
      (baseForm) => mergeForm(baseForm, actionData ?? {}),
      [actionData],
    ),

To merge in an error state that can be used to render server-side error messages. Bonus points if those error messages can be a key/value object so that they can be mapped to specific fields: errors: { age: 'Server validation: You must be at least 12 to sign up' }.

How often does this bug happen?

Every time

Screenshots or Videos

Client-side validation error: ✅

Server-side validation error: ❌

formErrors = useStore(form.store, (formState) => formState.errors)

Platform

• OS: macOs
• Browser: Chrome Version 132.0.6834.160 (Official Build) (arm64)

TanStack Form adapter

None

TanStack Form version

0.41.3

TypeScript version

No response

Additional context

No response

[Balastrong]

Might be a duplicate of #1135?