Reactjs - Warning message when using server action in Next.js 14

Normal
March 8, 2024
133 views
0 votes
2 Answers

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 🤟");
}

Tags: next.js reactjs

Answers

- LajosArpad
- March 2, 2024 at 4:04 pm
- 0 votes
0
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.
Login or Signup to reply.