Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

[abusayed0]

Could you please explain the error? I found it misleading because, in my code, I do not use any client component.

//index.js
export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}


//AddTaskForm.jsx
import {handleSubmit} from "@/app/action/index"
const AddTaskForm = () => {
    return (
        <form action={handleSubmit} autoComplete="off" className="mt-10 flex flex-col gap-4 max-w-[300px] mx-auto">
            <div className="flex flex-col gap-2">
                <label htmlFor="name">Name</label>
                <input className="border border-black" type="text" id="name" name="name" />
            </div>
            <div className="flex flex-col gap-2">
                <label htmlFor="password">Password</label>
                <input className="border border-black" type="password" id="password" name="password"/>
            </div>
            <button type="submit" className="bg-purple-500 py-2">Submit</button>
        </form>
    );
};
export default AddTaskForm;


//page.js
import AddTaskForm from '@/app/ui/AddTaskForm';
export default function Home() {
  return (
    <AddTaskForm/>
  );
}

[icyJoseph]

Here:

//index.js
export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}

You need to add a use server directive, like so:

//index.js
'use server'
export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}

[abusayed0]

Thank you for your response. I understand the solution, but my question was why the error message states "Functions cannot be passed directly to Client Components" when there is no client component in my code.

[icyJoseph]

I haven't looked into the nitty gritty details, but I reckon two things:

• action, as a function, implies escaping a client module, to call code on the server
• the runtime code that processes the action, is itself a client module

[abusayed0]

Got it, thank you so much.