TanStack
Impossible to programmatically set "onServer" errors with setErrorMap due to conflicting type definitions
Describe the bug
Currently, it's impossible to programmatically set a form-level server error using the semantically correct form.setErrorMap({ onServer: '...' }) in a type-safe way without resorting to complex workarounds.
The goal is to use the onServer key, which seems designed for server-side validation errors that are not part of the standard validation lifecycle.
The type of errorMap.onServer is derived from the TOnServer generic of the useForm hook.
This TOnServer generic is inferred from a validators.onServer property when initializing the form.
However, the FormValidators type definition does not include an onServer property. Attempting to add it results in a TypeScript error: Object literal may only specify known properties, and 'onServer' does not exist in type 'FormValidators<...>'.
Because onServer cannot be declared in validators, the TOnServer generic is inferred as undefined.
This leads to the final error when trying to use setErrorMap: Type 'string[]' is not assignable to type 'undefined'.
This design makes the onServer error channel effectively unusable in a type-safe manner out-of-the-box, creating a frustrating developer experience for the very common use case of handling server errors from a data-fetching library like TanStack Query.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-cxredtu7?file=src%2Findex.tsx
Steps to reproduce
- Go to the provided link
Expected behavior
The onServer key in setErrorMap should be a first-class, dedicated channel for programmatic errors, completely decoupled from the validators system.
Its type in the errorMap should default to unknown or any, allowing developers to easily set server-side errors from external sources like useMutation without needing placeholder validators or verbose explicit generics. This would align with the pattern seen in other popular libraries like react-hook-form's setError('root.serverError', ...) and would greatly improve the developer experience for server-validated forms.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: macOS Browser: Chrome Browser version: Version 138.0.7204.169 (Official Build) (arm64)
TanStack Form adapter
react-form
TanStack Form version
v1.15.0
TypeScript version
No response
Additional context
I dig a bit and seems like the core issue seems to be that TOnServer in FormApi is constrained as a validator type (extends undefined | FormAsyncValidateOrFn<TFormData>).
A potential fix could be to change the core type definitions to treat onServer as a special case, decoupling it from this constraint. For example, modifying the BaseFormState's errorMap definition to give onServer a static, flexible type.
Sorry if I'm missing something!
The use case for onServer is server side rendering, not programmatic errors. However, you're right that it does not seem to work as expected right now. At least the SSR example has the wrong type for it.
@LeCarbonator
Ok, It makes sense. However, from what I can see in the documentation, there is not even a word about onServer.
Can you elaborate on this poorly typed SSR Example? Is this what I wrote about? Maybe I can fix it.
@kusiewicz I was referring to the Examples section in the documentation, at the very bottom. There is one for SSR / Next.js / TanStack Start, but the types do not appear to be correct there.
I understand that TanStack Form has setErrorMap, but I can't find any documentation on how to use it. I have been trying for hours to get react-dropzone working with tanstack form, and it would be incredibly helpful to have a direct way to manually set validation errors. In my case, I need to validate a file upload and set an error accordingly. For what is a fairly common requirement in form handling, this feels like a critical missing feature.
@Gravy59 can you make a new GH issue for the docs? :) I agree we should tackle, but seems unrelated to this issue
