Functions cannot be passed ⚛️ React

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

A Server Component passed a function prop to a Client Component.

Seen on: React

Meaning

Props crossing the server→client boundary must be serializable. Pass Server Actions (marked "use server") or move the handler into the client component.

Common causes

  • Passing onClick or callback props from a server component
  • Passing class instances or Dates

⚡ Quick fix

  1. Define the handler inside the client component
  2. Use a Server Action with "use server"
  3. Pass plain data only

Detailed fix by platform

React

  1. jsx
    // actions.ts
"use server";
export async function save(formData: FormData) { … }

How to diagnose

  1. Prop — Which function prop?
  2. Boundary — Server → client?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.