How to return and map external service errors to fields in a Next.js Server Component action?

[PawelM-DDH]

I have a problem with returning errors. In a function like serverValidate using ZOD, all variables might be valid, but later in the action function I send a database query to subscribe an email to the newsletter. If that email already exists, I want to return an error for that field saying that this email already exists.

Is there a good practice for this? Should the error formats match those from ZOD? Does tanstack/react-form have any helper function to prepare such an error?

I prepared an example: https://codesandbox.io/p/devbox/boring-hoover-sjlvcc

The only solution I came up with is returning something like ServerFormState in this case, or for example throw new ServerValidateError. But then it`s tricky to handle the types properly. Is there any other approach for this?

Does anyone have any cool examples of large applications with server components Next.js with tanstack/react-form on GitHub?

[BOTShaneZA]

Also struggling with a similar issue but using tanstack start