Getting weird error in the form action by using Server Action

[Panhara28]

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().')"

[bill-dou]

You must declare use server at the beginning of the action file, then it will work properly.

'use server'

// your code

[mustafasturan]

Latest update on nextjs demo commerce store using experimental feature of react:
import {
// @ts-ignore
experimental_useFormState as useFormState,
// @ts-ignore
experimental_useFormStatus as useFormStatus
} from 'react-dom';

Throws same error when button is disabled. You can see it here if you inspect disabled button:
https://demo.vercel.store/product/acme-drawstring-bag

<form action="javascript:throw new Error('A React form was unexpectedly submitted.')"><button aria-label="Please select an option" aria-disabled="true" class="relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white cursor-not-allowed opacity-60 hover:opacity-60"><div class="absolute left-0 ml-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg></div>Add To Cart</button><p aria-live="polite" class="sr-only" role="status"></p></form>

[rvanlaarhoven]

It's the same on the react.dev docs. Simply inspect the example form here

[jjjjcccjjf]

I encountered this bug earlier. The cause is that I was passing a handler function just like I would on a onSubmit handler. I realized it was a mistake. You can only pass the action directly to the action attribute. Do not pass any handlers whatsoever.

❌

const onSubmitHandler = (formData: FormData) => {
    // do something
    actionHandler(formData)
}

<form action={onSubmitHandler}></form>

☑️

<form action={actionHandler}></form>

I hope this helps someone who face the same issue.

[Hugomndez]

I am researching how to reset the form after submission, and so far, I have only found this solution using useRef. However, as mentioned by @jjjjcccjjf it causes an error to be thrown. Does anyone know of a workaround?

const onSubmitHandler = (formData: FormData) => {
    actionHandler(formData)
    // do something
    ref.current?.reset();
}

<form ref={ref} action={onSubmitHandler}></form>

[jjjjcccjjf]

Check line 84 in this code:
https://github.com/jjjjcccjjf/haikoo2/blob/main/components/CreateHaikuCard.tsx

I found a way to programmatically invoke the server action while using a handler at the same time.

[Hugomndez]

Thanks @jjjjcccjjf, that is very helpful.

[furkanozturklab]

To simplify it, we need to implement it like this :

const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const formData = new FormData(event.currentTarget); startTransition(() => { formAction(formData); }); };

<form className="analyze-form" name="formName" onSubmit={handleFormSubmit} ref={formRef} > // this input or buttons </form>

Thank you too for the solution @jjjjcccjjf

[janacm]

I got this error because I had both onSubmit and action attributes on my form element, i.e.

This is WRONG:

      <form
        action={formAction}
        onSubmit={(e) => {
          e.preventDefault();
          console.log(e.target);
        }}
      >

Correct:

      <form
        action={formAction}
      >

[Alex1899]

I am also seeing the same issue. Any idea how to fix this?

[janacm]

Hi, I noticed that this can happen if you are nesting server components and client components incorrectly. See these articles:

1. React Server Components vs Client Components
2. Creating forms in NextJS

[deadcoder0904]

i got this when i tried to automate 100+ signup submissions using fetch api. i guess that's not possible with server actions. here's my code:

rate-limit/utils.ts

import { parse } from 'node-html-parser'

export const LOCALHOST_URL = 'http://localhost:3000'

export async function getActionNo(): Promise<string> {
  const res = await fetch(`${LOCALHOST_URL}/signup`)
  const html = await res.text()
  const $ = parse(html)
  const str = $.querySelector('input[name="$ACTION_1:0"]')
    ?.getAttribute('value')
    ?.toString() as string
  const data = JSON.parse(str)

  return data.id
}

rate-limit/signup.ts

import { LOCALHOST_URL, getActionNo } from 'rate-limit/utils'

async function main() {
  const actionNumber = await getActionNo()

  const formData = new FormData()
  formData.append('email', 'a@a.com')

  const res = await fetch(`${LOCALHOST_URL}/signup`, {
    method: 'POST',
    credentials: 'same-origin',
    body: formData,
    headers: {
      'Next-Action': actionNumber,
    },
  })

  const data = await res.text()

  console.log({ res, data })
}

main()

I'm still trying it here but I think I have to use Puppeteer/Playwright with it. Idk if there's an easier alternative.

[jjjjcccjjf]

Why do you need Next JS in this use case?

[gumpen]

I added 'use client' to the component that uses <form> and it worked.

In other places, I was using useFormState, so I had 'use client'.

[j-nielle]

this worked for me, thanks!

[JPGJ24]

example please

[itoutcome]

Issue is still there. All you have to do is navigate from one route to the route that contains the <form> and you can see it clear as daylight

[evgeniyPP]

I had the same issue: some of my forms were throwing an error A React form was unexpectedly submitted. instead of triggering a server action.

The answer was simple: I had this <form> inside another <form>. Once I separated them, everything worked as it should.

[bdrtsky]

I have this error in every form I have. None of solutions in this topic helped.

[semklim]

Thanx to @gumpen.

For me solution was to add 'use client' in submit component.

Double check all form elements in you for. If form is a Client component, all children must be Client component with use client at the top of file.

[ItayElgazar]

Any news with this? none of the solutions here seemed to help. I don't have any nested forms, I have 'use client' where it needs to be, anytime I use the router (or link) to route to a component with a form, I get this error, no matter what.