Warning message when using server action in Next.js 14

Question

I am getting this warning message in my server-side console when using server actions:

Warning: Cannot specify a encType or method for a form that specifies a function as the action. React provides those automatically. They will get overridden.

But I am not sure what it means and why it's appearing.

Here's my code:

import { makeAction } from "./action";

export default function About() {
  return (
    <div className="container mx-auto mt-10">
      <h1 className="text-4xl font-bold">Test me</h1>
      <form
        method="post"
        action={makeAction}
        className="space-y-2"        
      >
        <input
          type="text"
          placeholder="Firstname"
          className="input input-bordered w-full max-w-xs block"
          name="firstName"
        />
        <input
          type="text"
          placeholder="last name"
          className="input input-bordered w-full max-w-xs block"
          name="lastName"
        />
        <button type="submit" className="btn btn-primary block">
          Submit me
        </button>
      </form>
    </div>
  );
}

Here's my action.ts file:

"use server";
export async function makeAction() {
  console.log("🤟 you made an action 🤟");
}

Answer 1

Removing encType and method works for me

Answer 2

The warning merely tells you that your

encType="multipart/form-datas"

will be ignored, because in your scenario, React determines the encType automatically, hence your line above will be ignored. The reason given for this is that your action is a function:

action={makeAction}

and:

"use server";
export async function makeAction() {
  console.log("🤟 you made an action 🤟");
}

Try removing your encType specification and your warning will likely disappear.

You will also need to remove the method item to make the warning disappear, as per the warning message.