Warning: Only plain objects can be passed to Client Components from Server Components. Date objects are not supported

[Mic1]

import TestDate from "../components/TestDate";

const fetchDateObj = async () => {
	return new Date("1995-12-17T03:24:00");
};

async function Home() {
	const dateObj = await fetchDateObj();
	return (
		<div>		
			<TestDate dateObj={dateObj} />
		</div>
	);
}

export default Home;

--------

"use client";

function TestDate({ dateObj }) {
	console.log("TestDate dateObj: ", dateObj);
	return <div>TestDate: {dateObj}</div>;
}

export default TestDate;

server console: "Warning: Only plain objects can be passed to Client Components from Server Components. Date objects are not supported. <... dateObj={Date}>"

"next": "^13.1.6", (appDir) structure. The date is getting passed to the client component and displayed, so the warning is confusing. (My problem is that I am seeing how much of Crossfilter( d3.js, dc.js, crossfilter.js) can be moved onto server components and after parsing a 250,000 line .csv file on a server component, I pass the data to a client component and get the server console "warning" 250,000 times)

[icyJoseph]

Hi,

The problem is that to pass data from Server Components to Client Components, the data must be serialisable.

• https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization

In our world, frontend development, typically this means that the "data" has to be compliant to JSON transformations, that is from JavaScript Objects/Primitives to Strings.

The Date object is special because if you pass a Date object, into JSON.stringify, it gets casted as a string, but then if you try to recover the Date object by parsing, you get a string anyway, so the Date object is destroyed in the process.

let obj = {d : new Date()}
JSON.stringify(obj) // '{"d":"2023-02-20T07:22:59.163Z"}'
let str =JSON.stringify(obj)
JSON.parse(str) // {d: '2023-02-20T07:22:59.163Z'}

And that's why it can't be passed as props from Server to Client, that's what this error is telling you.

Other notables are functions and closures, which cannot possibly be reconstructed client side.

[Mic1]

Thanks for the explanation - in further looking at my example I see that it is a string date that the client receives.

[Luise8]

so in the end we have to pass the Date as a string with JSON.parse(JSON.stringify())

[mohas]

Hi, can you also see this object, I checked and there is no date object here:

console.log(inspect(products, true, 100, true))
output:
[
  [Object: null prototype] {
    id: '16',
    title: 'Colour ',
    uptitle: null,
    published_at: '2024-02-25T21:44:13.360Z',
    forward_link: null,
    position: null,
    services: [
      [Object: null prototype] { id: '8', title: 'Acrylic Colour' },
      [length]: 1
    ],
    thumbnail: [Object: null prototype] {
      alt: null,
      file: [Object: null prototype] {
        hash: 'e45d664e',
        ext: 'png',
        mime: 'image/png'
      }
    }
  },
  [length]: 1
]

I get these warnings regarding this object:

Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  [{id: "16", title: ..., uptitle: Null, published_at: ..., forward_link: ..., position: ..., services: ..., thumbnail: ...}]
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  [{id: "8", title: ...}]
   ^^^^^^^^^^^^^^^^^^^^^
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  {id: "16", title: ..., uptitle: Null, published_at: ..., forward_link: ..., position: ..., services: ..., thumbnail: {alt: Null, file: ...}}
                                                                                                                       ^^^^^^^^^^^^^^^^^^^^^^
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  {alt: Null, file: {hash: ..., ext: "png", mime: ...}}

[KQuiggins]

Here is the page that specifies serializable parameters and return values
https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values

null prototype is specified as not being serializable.
Hope this helps! I'm learning this myself and this page has helped to know what to avoid.