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

[andreydjason]

Hi, I'm learning Next.js and I found this error 'by accident' when I was looking at the regenerated HTML.
I'm not sure what to do, I already tried every single fix that are on the internet, and discussions here too, even the AI (which helps a lot with a lot of kinds of errors), but nothing can fix it.

I'm using Server Actions as they suggest on the learning page and I'm following exactly all the steps - https://nextjs.org/learn/dashboard-app/mutating-data
Tho the form with the delete button still works after the table is regenerated from revalidatePath('/dashboard/invoices').

I'll try to explain below: (Sorry my english)

I have the website runing here (where the error occurs): https://aprendendo-nextjs-dashboard.netlify.app/dashboard/invoices

When you click the Delete button it deletes the invoice, and reloads the table, and then you can see the error on the regenarated HTML as follows: (Sometimes the errors appears on page loading)
<form action="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().')" class="p-0"><button...>*Delete Button*</button></form> (just so you know the error)

But the delete button still works if you want to delete other invoices.

Here is the repository: https://github.com/andreydjason/aprendendo-nextjs-dashboard - it is pretty much the same as where they teach how to do it: https://nextjs.org/learn/dashboard-app/mutating-data

• the table with the form delete button - https://github.com/andreydjason/aprendendo-nextjs-dashboard/blob/main/app/dashboard/invoices/page.tsx
• the delete button calls an action (deleteInvoice) to - https://github.com/andreydjason/aprendendo-nextjs-dashboard/blob/main/app/lib/actions.ts - using const deleteInvoiceWithId = deleteInvoice.bind(null, id);
• it deletes the invoice and do a revalidatePath('/dashboard/invoices')
• the table is regenerated and the error occurs on the <form action="[javascript error here]">Delete Button</form>

[icyJoseph]

Hi,

This looks suspicious... I was able to reproduce with just:

import { foo } from "./actions";

export default function Home() {
  return (
    <form action={foo}>
      <button type="submit">Submit</button>
    </form>
  );
}

And

'use server';
import { revalidatePath } from "next/cache";

export async function foo(data: unknown) {
  console.log({ data })
  revalidatePath("/foo")
}

The revalidatePath is the key thing here it seems - 🤔 I'll ask around.

[icyJoseph]

• https://github.com/facebook/react/blob/02a8811864caf09ed1229e939742f793a8ed5791/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L498-L502

So like, following from the code comment, I guess this is likely harmless ~ though, maybe we'll look into this a bit more.

[andreydjason]

Oh nice, good to know, thank you very much!

[andreydjason]

I'm leaving this here open so anyone can find it easily, as I could not find a proper and definitive answer like this one above anywehere else. Thanks again @icyJoseph.

[icyJoseph]

yeah - I'll have this in my stack of things to eventually review further.