getServerSideProps cannot be serialized as JSON. Please only return JSON serializable data types

Bug report

Describe the bug

I’m returning a row set from MySQL (using the mysql2 library) in my getServerSideProps. Getting the following error:

SerializableError: Error serializing .data[0]returned fromgetServerSidePropsin "/reports/[report]/[start]/[end]". Reason:object ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

But calling JSON.stringify(data) works just fine.

If I do a JSON.parse(JSON.stringify(data)) it works just fine, but that seems very odd.

To Reproduce

1. Execute a query using the mysql2 library
2. Return the row set as a prop in getServerSideProps
3. Get Error.

Expected behavior

I expect the data to be serialized without an error since JSON.stringify() works just fine.

Additional context

Appears others are having this problem: https://stackoverflow.com/questions/61188494/getserversideprops-and-mysql-rowdatapacket

[timneutkens]

The main reasoning behind this limitation is that with getInitialProps we used to allow anything that can be stringified and that resulted in some really hard to track down UX bugs when hydrating client-side. Eg the hydration would fail because suddenly the Date object you had server-side is a string client-side.

We need to serialize the result of getStaticProps/getServerSideProps because it has to be sent to the browser to do hydration.

So we basically went with a strict checking mechanism (only runs in development) in order to prevent this from happening. We can potentially add an option to bypass in the future if there’s enough need for it 👍

[mayrsascha]

@timneutkens I don’t get why this issue is closed. It seems quite a lot of people are still stumbling upon this and there is demand for a better solution. A warning in development mode seems to be sufficient to help users track down hydration errors and it wouldn’t require everyone to use hacks to serialize dates and such.