Only plain objects can be passed to Client Components Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported

A Server Component passed a non-serialisable value (class instance, Date-like object, Mongoose doc, Map) as a prop to a Client Component.

Exact message you may see Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supportedOnly plain objects can be passed to Client Components from Server ComponentsError: Objects are not valid as a React child Next.js server componentOnly plain objects can be passed to Client Components. Classes or null prototypes are not supported
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Props must be serialisable. Convert Mongoose/Prisma results to plain objects (JSON.parse(JSON.stringify(doc)), .lean(), toObject()), pass ISO strings instead of Date objects in some cases, and don't pass class instances, functions or Maps. The error shows the offending prop name.

Common causes

  • Mongoose documents passed as props
  • Class instances/ORM models
  • ObjectId/Decimal values
  • Functions as props (separate error)
  • Map/Set or objects with toJSON getters

⚡ Quick fix

  1. Use .lean() for Mongoose queries
  2. Map to plain DTO objects before passing
  3. Convert dates to strings

Detailed fix by platform

Next.js

  1. const posts = await Post.find().lean(); return <PostList posts={JSON.parse(JSON.stringify(posts))} />;

How to diagnose

  1. Prop — Which one?
  2. Type — Class or ORM document?
  3. Fix — lean/DTO?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

CastError ObjectId — CastError: Cast to ObjectId failed for value "x" (type string) at path "_id" (Node.js)CastError ObjectIdcircular JSON — TypeError: Converting circular structure to JSON (JavaScript)circular JSONConflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…Functions cannot be passed — Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (React)Functions cannot be p…next build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…Server actions must be async functions — Next.js: Error: Server actions must be async functions (Next.js)Server actions must b…Only plai…

Explore the map of this error Full error map →

🧠 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.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.