Next Server Actions example does not work

[rburgst]

Describe the bug

The next server action example does not work currently

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

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'tunnel-agent' in '/home/projects/vbwimykwkg.github/node_modules/sharp'
<w> while resolving 'tunnel-agent' in /home/projects/vbwimykwkg.github/node_modules/sharp to a directory
 ✓ Compiled / in 5.9s (534 modules)
 GET / 200 in 6074ms
<w> [webpack.cache.PackFileCacheStrategy]

When submitting the form, the useTransform code blows up.

Your minimal, reproducible example

https://stackblitz.com/github/tanstack/form/tree/main/examples/react/next-server-actions?embed=1&theme=dark&preset=node&file=src/index.tsx

Steps to reproduce

1. Open the stackblitz
2. notice the sharp warning about tunnel-agent
3. submit the form
4. BOOM

Expected behavior

The example should work and the server action should be invoked.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: Mac OSX Sequoia
• Browser: Arc

TanStack Form adapter

None

TanStack Form version

0.33.0

TypeScript version

5.6.2

Additional context

No response

[rburgst]

In Stackblitz and codesandbox if I press the "Submit" button, I get

[rburgst]

ok, I got it to work with the sample:
https://stackblitz.com/edit/tanstack-form-bz8cz5?file=README.md

[anisharaz]

Am still getting the error and #967 (comment) this still have the issue , how did you get to work , what is the problem ?

[rburgst]

@anisharaz see the PR #970

[rburgst]

Also for posterity: I have a next setup where also server side logging is shown in the browser console, however, for unknown reasons the logs from the server action never showed up in my browser console. They did show up in the server console though.
Also note that if you dont get your POST values on the action, then your <input> fields are missing the name attribute.

[anisharaz]

@rburgst Thankyou that fixed it , but a new problem arised or it exist am not sure, while submitting while the fields are empty the request goes to server and server validation invalidates the and responce with the message and client side validation run too. Does it makes sence to make to send request to server while the client validation is failing

[rburgst]

@anisharaz this looks like a bug in tanstack form to me

[rburgst]

actually, this is due to the fact that if you did not touch the form state then "canSubmit" is true, only once you make any modification then the validation state is updated, see also https://tanstack.com/form/latest/docs/framework/react/guides/validation#preventing-invalid-forms-from-being-submitted