Error: Only plain objects can be passed to Client Components from Server Components
You're passing something non-serializable — a class instance, a Date in some cases, a function, or a Prisma model with methods attached — as a prop from a Server Component to a Client Component. Convert it to a plain object first, usually with `JSON.parse(JSON.stringify(data))` or by manually picking the fields you need.
What causes this error
Server Components render on the server and Client Components hydrate in the browser — anything passed between them has to cross that boundary as serialized data, similar to a network request. Class instances, functions, Maps/Sets, and some ORM query results (which often attach methods or non-enumerable properties) aren't plain serializable objects, so Next.js rejects them.
The Fix
// Server Component
import ClientChart from './ClientChart';
export default async function Page() {
const rows = await prisma.article.findMany();
// Strip to a plain, serializable shape before passing down
const plainRows = rows.map((r) => ({
id: r.id,
title: r.title,
viewCount: r.viewCount,
}));
return <ClientChart data={plainRows} />;
}Common causes / variations
- Passing a full Prisma result object straight through instead of picking plain fields
- Passing a class instance (e.g. a custom Error subclass, a Decimal type) as a prop
- Accidentally passing a function (like a callback) from a Server Component into a Client Component — functions can never cross this boundary
Related errors
See also: You're importing a component that needs useState/useEffect, params should be awaited.
Comments
Loading comments...