Form error with server action on route change

[riacoding]

Link to the code that reproduces this issue

https://github.com/riacoding/formbug

To Reproduce

1. Start Application in Dev mode
2. Click Contact from navbar
3. Open Dev tools and inspect the form tag
4. Observe the Error in action attribute javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')
5. Fill out form with required fields
6. Submit form
7. Receive Above Error.
8. Refresh the page command + R
9. Refill the form
10. Submit - No error

Current vs. Expected behavior

I would expect that the action attribute would not have the error message. I believe that Nextjs is injecting some attributes and some hidden form elements into the form. This does not appear to happen on a route change and only happens on a full page refresh. If the elements are not there the form will error on submit. The happens both with just the form action and with form action and onSubmit handlers.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 98304
  Available CPU cores: 12
Binaries:
  Node: 20.5.0
  npm: 9.8.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This was in the production release 14.2.5. It is also integrating React Hook Form for client side validation with zod. Steps to reproduce in the sample repo as well FormBug Repo

[AliRazaDev27]

Hello, Do you need to use both action and onSubmit at the same place (inside

) ?. if not then you can use the onSubmit and remove the formAction and use formAction inside your onSumbit button. Which works perfectly. Though you have to make some changes to your FormData type as it is not compatible with native FormData type.If you still want to use action inside form, let me know.Also check your pull requests.

[AliRazaDev27]

Your current nextjs/react version does not support form action with server actions, therefore you are getting this error, either you can do as in the pull request or upgrade to canary/experimental(though beware of breaking changes)

[AliRazaDev27]

It would be really appreciated if the issue is closed after resolution. ; )

[riacoding]

It would be really appreciated if the issue is closed after resolution. ; )

Sorry, thought I closed it already my bad

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.