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

[brett-skyshark]

This helped me, thank you!

[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.

[granadosbrand]

You saved me the day, thank you!

[jagonmoy]

Thanks a lot for the solution !
Did similar thing earlier and your solution worked .

[OsamaAlrwajbeh]

Thank you very much, the problems are solved.

[BerkanJs]

thanks

[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.

[benyamynbrkyc]

Same here :(

[Danielg36]

any solution ?

[cjxe]

Problem

This error may be caused by several different reasons.

When I inspected my form, I saw this text in the browser's rendered DOM attached to my <form /> element:

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

When I clicked on the "Error" notification which was rendered by Next.js, I saw this error:

Warning: Expected server HTML to contain a matching <form> in <div>.

Solution

In my case, the issue was page.tsx's layout wrapper (i.e., layout.tsx).

/(auth)
/(auth)/layout.tsx <-- removing this fixes the error
/(auth)/signup/page.tsx <-- the error is no longer on this page

The layout page has a full-screen style (e.g., 100vh or 100%). After the page was mounted, one of my extensions (Bitward) popped up a banner at the top of the page. Disabling the extension solved the hydration issue.

[cjxe]

Problem

Solution

The reason and the solution is to move the form open/close tags from all conditions.

Instead of

`{!condition ? <></> :

<form action={formAction}>

        <SubmitButton />

</form>

}`

make it this way

`

{

!condition ? <></> :

    <>

        <SubmitButton />

    </>

}

`

this will solve it

My form element is not in a condition, it's wrapped by 1 div element.

[sb3455261]

Warning: Expected server HTML to contain a matching

in

.

there should be conditional logic, invalid html, hydration mismatch or a similar issue, try to look it up higher in the tree
a plain form in a div will not throw this error

[cjxe]

, try to look it up higher in the tree

@cbyapr I found it.

The layout page has a full-screen style (e.g., 100vh or 100%). After the page was mounted, one of my extensions (Bitwarden) popped up a banner at the top of the page. Disabling the extension (or not using 100vh or 100% styles in the layout) solved the hydration issue.

Thanks for the help!

[sb3455261]

this error is a real pain, was)

[anthonyalayo]

I also hit this error from conditional logic, but it makes no sense. I can't use any conditional rendering with this feature? Why?

[Qodestackr]

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader, User2 } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { Bounce, ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { doSocialLogin } from "@/actions/auth.actions";

const formSchema = z.object({
  email: z.string().email({ message: "Enter a valid email address" }),
  // password: z.string().min(6),
});

type UserFormValue = z.infer<typeof formSchema>;

export default function UserAuthForm() {
  const [isLoading, setIsLoading] = useState(false);

  const router = useRouter()
  const { register, handleSubmit, reset, formState: { errors, isSubmitSuccessful } } = useForm()

  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl");
  const [loading, setLoading] = useState(false);
  const defaultValues = {
    email: "demo@gmail.com",
  };
  const form = useForm<UserFormValue>({
    resolver: zodResolver(formSchema),
    defaultValues,
  });

  const onSigninSubmit = async (data: any /**UserFormValue */) => {
    // signIn("credentials", {
    //   email: data.email,
    //   callbackUrl: callbackUrl ?? "/dashboard",
    // });

    console.log(data)
    setIsLoading(true);
    // Simulate a network request or actual form submission here


    setTimeout(() => {
      setIsLoading(false);
      // Handle navigation or further steps after account creation
    }, 2000);

    setTimeout(() => {
      toast.success('Sign in successfull!', {
        position: "top-right",
        autoClose: 3000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        // progress: undefined,
        theme: "light",
        transition: Bounce,
      });
    }, 2000);

    setTimeout(() => { router.push('/dashboard') }, 3100)

  };

  return (
    <div className="w-2/3 mx-auto bg-gray-100 rounded-md p-4">
      <h2>TeleMed</h2>
      <form onSubmit={handleSubmit(onSigninSubmit)} className="mt-4 flex flex-col items-center">
        <ToastContainer
          position="top-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="light"
        // transition:Bounce,
        />
        <div className="w-full flex-1">
          {/*  */}
          <GoogleButton />
          {/*  */}

          <h2 className="my-2 text-xl text-center text-[#283779]">
            Or Use Email/Password
          </h2>

          <div className="w-2/3 mx-auto">
            <Input
              {...register('email', { required: true })}
              className="w-full px-2 py-6 rounded-lg font-light bg-gray-100 border border-gray-200 
                    placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
              type="email" placeholder="Email" />
            {errors?.email && <span className="text-sm font-light text-red-500">Please enter a valid email.</span>}


            <Input
              {...register('password', { required: true })}
              className="w-full px-2 py-6 rounded-lg font-light bg-gray-100 border border-gray-200 
                    placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
              type="password" placeholder="Password" />
            {errors?.password && <span className="text-sm font-light text-red-500">This field is required.</span>}

            <Button
              type='submit'
              className="mt-5 tracking-wide font-light text-white w-full py-6
                             rounded-lg  transition-all duration-300 ease-in-out flex items-center 
                             justify-center focus:shadow-outline focus:outline-none">
              {
                isLoading ? (<>
                  <span className="flex gap-1 text-green-200"><Loader className="animate-spin" />{' '} Signing in....</span>
                </>) : (<>
                  <User2 />
                  <span className="mx-2">
                    Sign In
                  </span>
                </>)
              }
            </Button>

            <span className="block text-gray-800 my-3">
              No account yet?
              <Link href={'/auth/signup'} className="text-green-800">
                {'  '} Register instead
              </Link>
            </span>

            <span className="block text-blue-500 my-3">
              <Link href={'/auth/reset-password'} className="text-blue-600">
                {'  '} Reset Password
              </Link>
            </span>
          </div>
        </div>
      </form>
    </div>
  );
}

function GoogleButton() {
  return (
    <form action={doSocialLogin}>
      <div className="flex flex-col items-center">
        <button
          onClick={() => { }}
          className="w-full max-w-xs font-bold shadow-sm bg-white rounded-lg py-3 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline">
          <div className="bg-white p-2 rounded-full">
            <svg className="w-4" viewBox="0 0 533.5 544.3">
              <path
                d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
                fill="#4285f4" />
              <path
                d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
                fill="#34a853" />
              <path
                d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
                fill="#fbbc04" />
              <path
                d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
                fill="#ea4335" />
            </svg>
          </div>
          <span>
            Sign In with Google
          </span>
        </button>
      </div>
    </form>
  )
}

Is this as a result of having two nested forms? 😄

[jazsouf]

Hey, for anyone stuck with this. I had this error pop up because I had a form inside another form. Thanks to the better hydration error message in Next recently, I was able to get it fixed.

[johnreyev]

I get this error as well. I also noticed that it doesn't occur when I do a full reload. My workaround for now is ensuring that when linking to the page with the form, it performs a full reload. It's a dirty solution, but it works for now.

[aarongustafson]

I have no onSubmit, just the action pointing to a server action proxied through useFormState().

In my instance I have a "use client" form embedded into a "use server" page. It works fine with a full page render, but if I allow Next’s links to handle the nav, the form action gets replaced by the JavaScript error.

The repo is private, so I can't share, but here's is a sample of the form code, pared down to the basics.

"use client";

import { useFormState, useFormStatus } from "react-dom";

import { useToastContext } from "@/app/components/toast-container";

import { sendContactEmail } from "@/app/lib/server/send-email";

export function ContactForm() {
    const [sendToast] = useToastContext();
    const [toast, formAction] = useFormState(sendContactEmail, null);
    const status = useFormStatus();

    return (
        <form action={formAction}>
           ...
        </form>
    );
}

[okawibawa]

Yes I came to the same realisation. My page is simple as well, no chance of nested form elements, the page itself is a 'use server' component and the form is a 'use client' component

I've essentially copied the structure from Jack Herrington's 'React Hook Form & React 19 Form Actions, The Right Way' video, using react-hook-form/zod client validation and then also allowing server validation to show on the client via useFormState.

Like other people have said they've got the error from having both onSubmit and action properties set, this is what Jack's video suggests, but of course that doesn't make it right.

I switched my implementation from the suggested

ref={formRef}
action={formAction}
onSubmit={(event) => {
        event.preventDefault()
	form.handleSubmit(() => formRef.current?.submit())(event)
}}

to

onSubmit={(event) => {
        event.preventDefault()
	const formElement = event.target as HTMLFormElement
	form.handleSubmit(() => formAction(new FormData(formElement)))(event)
}}

This seems to work, I'm not sure if there are downsides to this approach, but I don't believe so.

I have the same error and able to solve it using your solution. I was following Jack Herrington's tutorial on RHF and Server Actions and stumbled upon it. No other methods worked, so thanks!

[Haugen]

@jmarks-joshua I went with your proposed solution and it works great. Thank you! Gonna go ahead and remove that ref as well as it's no longer needed.

[jmarks-joshua]

Glad it worked but I do want to note there is actually a big drawback with this approach it doesn't actually achieve what the tutorial was trying to demonstrate which includes working when js is disabled. In my work that's not super important most of the time, but it should be noted that this doesn't do everything Jack set out to do in the video, but equally it does most of it.

[aarongustafson]

Thanks for that. Lacking the ability to function without client side JS functioning properly makes the app too fragile. There are just to many things that can take users down that unhappy path. https://www.kryogenix.org/code/browser/everyonehasjs.html

[mongolyy]

I got the same error when testing my application.
I changed the vitest environment from happy-dom to jsdom and the error stopped occurring!

[andreas-bylund]

Had the same problem in a component with two

. When I broke out each form to a own component and imported them it solved the problem.

[selcukcihan]

I don't know how but removing the plugins: [require("tailwindcss-animate")] line from my tailwind config breaks the form submission somehow. Just in case someone else has the same issue.

[takashi]

Having the same problem with ChakraUI modal component

**"use client";

import {
  Button,
  FormControl,
  FormLabel,
  HStack,
  ModalBody,
  Text,
  useDisclosure,
} from "@chakra-ui/react";
import { getFormProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { invite } from "app/(unauthenticated)/signup/actions";
import { FormInput } from "components/form-input";
import { Modal } from "components/modal";
import { useFormState } from "react-dom";
import { memberInvitationSchema } from "utils/form/schema";

export const MemberSettings = () => {
  const { isOpen, onClose } = useDisclosure();

  const [lastResult, action] = useFormState(invite, undefined);
  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: memberInvitationSchema });
    },
    shouldValidate: "onBlur",
  });

  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalBody pb={6}>
          <form {...getFormProps(form)} action={action}>
            <FormControl mb={8}>
              <FormLabel>Email</FormLabel>
              <FormInput placeholder="email" />
            </FormControl>
            <HStack gap={2} w={"100%"} pb={4}>
              <Button
                bg={"bg.light.primary"}
                color={"text.light.primary"}
                borderRadius={"30px"}
                border={"none"}
                h={"auto"}
                w={"100%"}
                px={5}
                py={3}
                key={fields.email.key}
                name={fields.email.name}
                defaultValue={fields.email.initialValue}
              >
                <Text lineHeight={"24px"} variant={"large_strong"}>
                  Add
                </Text>
              </Button>
              <Button
                onClick={onClose}
                variant={"ghost"}
                borderRadius={"30px"}
                border={"none"}
                h={"auto"}
                w={"100%"}
                px={5}
                py={3}
              >
                Cancel
              </Button>
            </HStack>
          </form>
        </ModalBody>
      </Modal>
    </>
  );
};

Modal works as I expected but the form inside the modal shows 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(). error in action props of <form />

Is there any problem using server action with modal or somethink like that?

btw, I found similar issue on reddit https://www.reddit.com/r/nextjs/comments/1csf33b/nesting_a_form_using_server_actions_in_a_dialog/?onetap_auto=true&one_tap=true

[jmarks-joshua]

Is there any reason to believe this is related to the modal? Try it outside the modal. I don't know how conform-to works but does getFormProps return an onSubmit? There are several examples on here of both an onSubmit and an action causing this bug. It shouldn't but does.

[takashi]

When I tried it outside of modal, it works successfully. Then I tried without conform-to but with ChakraUI modal, it does not works and throws same error. So I think it is because of using modal. Sorry for less information in my first comment.

[eric-mathison]

When I tried it outside of modal, it works successfully. Then I tried without conform-to but with ChakraUI modal, it does not works and throws same error. So I think it is because of using modal. Sorry for less information in my first comment.

Did you have any luck figuring this out? I'm currently troubleshooting this using react aria components.

[ungureanustefan]

If it helps anyone to actually solve the issue, I've found that the component 'Link' from 'next/link' is causing it. Once I change it with a basic 'a' tag, it works perfectly. But we need 'Link' from 'next/link' to use the prefetch functionality.

[aarongustafson]

Yeah the issue is definitely the soft navigation. You’ll also see that if you do a full refresh of the page (even after soft navigation), the error goes away.

FWIW, I believe the issue crops up in Jest testing as well. We’re in the process of switching to Vitest, so I will see if it remains an issue there too.

[ungureanustefan]

Not sure if the Next team is aware though. And I wonder how big of a deal is this error, as so far it doesn't seem to break the app or to actually submit anything. I've attached an event listener to it for "submit" but even though the error in the DOM says that it has been submitted, nothing is caught by the event listener when the error pops up. So I'm not sure if it's merely just a warning, or if it causes a real problem.

[NickWoodward]

Yeah the issue is definitely the soft navigation. You’ll also see that if you do a full refresh of the page (even after soft navigation), the error goes away.

FWIW, I believe the issue crops up in Jest testing as well. We’re in the process of switching to Vitest, so I will see if it remains an issue there too.

agreed - i get the problem when my server action redirects the client to the form and the user tries to re-submit. when they navigate their themselves, or if they refresh after the redirect, there's no problem

[0xS4D]

Yes, the same problem here. Even if a form is submitted via a server action, the error appears again.

[ChrisClaude]

I am getting the same and I have use client declared at the top of the file. This isn't very encouraging. My form is very simple. I am reverting back to using client-side requests as this feature feels immature.

<form className="w-full overflow-hidden" action={getJobsWithRequestObject}>
      <TextInput
        id="search"
        type="search"
        placeholder="Search filters"
        icon={IoIosSearch}
        value={searchInput}
        onChange={event => handleSearchInputChanged(event.target.value)}
        name='search'
        required
      />
      <div className="mt-5">
        <p className="mb-1">Selected</p>
        <div className="border rounded-lg border-gray-300 flex gap-x-1 gap-y-2 w-full p-2 flex-wrap h-28 overflow-y-auto">
          {selectedFilters.map(({ name, category }, index) => (
            <Badge
              key={index}
              color="gray"
              icon={IoCloseOutline}
              onClick={() => handleUpdateSearchTermFilters(name, category)}
              className="text-nowrap cursor-pointer">
              {name}
            </Badge>
          ))}
        </div>
        <div className="flex justify-between mt-5">
          <span>Remote Only</span>
          <ToggleSwitch
            checked={isRemoteOnly}
            label="Toggle me"
            onChange={toggleIsRemoteOnly}
            theme={customToggleTheme}
            color="primary"
          />
        </div>
        <HR />

        <DrawerAccordion />

        <div className="mt-5 flex justify-between gap-x-2">
          <Button
            color="blue"
            className="w-1/2"
            type="submit"
            disabled={pending}>
            Apply
          </Button>
          <Button
            color="light"
            className="w-1/2"
            onClick={handleClearAllFilters}
            disabled={pending}>
            Clear All
          </Button>
        </div>
      </div>
    </form>

[ahbyass]

Had this same problem, mine was resolved due fixing a hydration miss match in an unrelated component.

[thomaslecoeur]

Had this issue because I was using useFormState and actions inside a form that was inside a Mantine modal triggered by the modal manager, which doesn't support it. Got it working by using a normal modal instead of the modal manager.