Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Question

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Currently, I am utilizing Prisma along with Next.js. My issue arises when attempting to retrieve content from Prisma within the getStaticProps function; while it successfully fetches the data, I encounter difficulties passing it on to the main component.

export const getStaticProps = async () => {
  const prisma = new PrismaClient();
  const newsLetters = await prisma.newsLetters.findMany();
  console.log(newsLetters);

  return {
    props: {
      newsLetters: newsLetters,
    },
  };
};

Despite displaying the fetched content in this image, an error is generated when trying to pass it as props:

https://i.stack.imgur.com/d34op.png

The error message received states: "Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types."

javascript next.js prisma serializable

Answer 1

Answer №1

If you're working with typescript, it's important to note that you cannot directly change the type of createdAt to a string or number, as shown here:

newsletter.createdAt = newsletter.createdAt.toString();
// Error: Type 'string' is not assignable to type 'Date'.

Instead, a workaround is to utilize JSON.stringify within JSON.parse in order to create a serializable object:

export const getStaticProps = async () => {
  const prisma = new PrismaClient();
  const newsletters = await prisma.newsletters.findMany();

  return {
     props: {
        newsletters: JSON.parse(JSON.stringify(newsletters)) // <===
     }
  }
}

Answer 2

If you're working with typescript, it's important to note that you cannot directly change the type of createdAt to a string or number, as shown here:

newsletter.createdAt = newsletter.createdAt.toString();
// Error: Type 'string' is not assignable to type 'Date'.

Instead, a workaround is to utilize JSON.stringify within JSON.parse in order to create a serializable object:

export const getStaticProps = async () => {
  const prisma = new PrismaClient();
  const newsletters = await prisma.newsletters.findMany();

  return {
     props: {
        newsletters: JSON.parse(JSON.stringify(newsletters)) // <===
     }
  }
}

Answer 3

Answer №2

If you're looking to handle Javascript objects like Dates in Next.js, you can leverage Blitz's `superjson` package. Detailed instructions can be found at https://github.com/blitz-js/superjson#using-with-nextjs:

Using with Next.js

Next.js data hooks such as getServerSideProps, getInitialProps, and getStaticProps have limitations when it comes to transmitting JavaScript objects like Dates. To overcome this issue of converting Date objects to strings, etc., Superjson proves to be a helpful solution.

Next.js SWC Plugin (experimental, v12.2 or above)

While experimental, Next.js SWC plugins offer a significant performance boost. To integrate the SuperJSON SWC plugin, install it first and include it in your next.config.js:
yarn add next-superjson-plugin
// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      [
        'next-superjson-plugin',
        {
          excluded: [],
        },
      ],
    ],
  },
} 

Answer 4

If you're looking to handle Javascript objects like Dates in Next.js, you can leverage Blitz's `superjson` package. Detailed instructions can be found at https://github.com/blitz-js/superjson#using-with-nextjs:

Using with Next.js

Next.js data hooks such as getServerSideProps, getInitialProps, and getStaticProps have limitations when it comes to transmitting JavaScript objects like Dates. To overcome this issue of converting Date objects to strings, etc., Superjson proves to be a helpful solution.

Next.js SWC Plugin (experimental, v12.2 or above)

While experimental, Next.js SWC plugins offer a significant performance boost. To integrate the SuperJSON SWC plugin, install it first and include it in your next.config.js:
yarn add next-superjson-plugin
// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      [
        'next-superjson-plugin',
        {
          excluded: [],
        },
      ],
    ],
  },
} 

Answer 5

Answer №3

It appears that nextJS has a preference for serializing only scalar types for optimization purposes. More information on this can be found in a GitHub thread. To work around this, you should convert your Date objects to UNIX timestamps before returning them.

// Sample data
let newsLetters = [
    {
        id: 'your-id',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12777f737b7e52776a73... [email protected]"></a>',
        createdAt: new Date()
    }
];

// Update the array
newsLetters.map(x => {
    x.createdAt = Math.floor(x.createdAt / 1000);
    return x;
})

// Utilize newsLetters
console.log(newsLetters);

Answer 6

It appears that nextJS has a preference for serializing only scalar types for optimization purposes. More information on this can be found in a GitHub thread. To work around this, you should convert your Date objects to UNIX timestamps before returning them.

// Sample data
let newsLetters = [
    {
        id: 'your-id',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12777f737b7e52776a73... [email protected]"></a>',
        createdAt: new Date()
    }
];

// Update the array
newsLetters.map(x => {
    x.createdAt = Math.floor(x.createdAt / 1000);
    return x;
})

// Utilize newsLetters
console.log(newsLetters);

Answer 7

Answer №4

The NextJS API Docs state that getStaticProps should return a serializable object in order for any props passed to be serialized with JSON.stringify.

This means that under the hood, boolean, number, string, and anything that passes the Lodash isPlainObject test are allowed. You can refer to the Lodash Documentation on this at https://lodash.com/docs/#isPlainObjectChecks.

In the Lodash documentation for this function, it specifies that it checks if a value is a plain object - created by the Object constructor or one with a [[Prototype]] of null.

There is a Stack Overflow post discussing the difference between an object and a plain object in JavaScript: The difference between object and plain object in JavaScript?

Expanding on @Viktor Kynchev's answer, depending on what you need from the prop, you can simply convert it to a string, number, or another type accepted by Lodash's isPlainObject method.

For example, if you have a date object provided via Prisma API like the original poster (OP), you can convert it to a string as shown below:

for (const element of newsLetters) {
  element.createdAt = element.createdAt.toString()
}

Answer 8

The NextJS API Docs state that getStaticProps should return a serializable object in order for any props passed to be serialized with JSON.stringify.

This means that under the hood, boolean, number, string, and anything that passes the Lodash isPlainObject test are allowed. You can refer to the Lodash Documentation on this at https://lodash.com/docs/#isPlainObjectChecks.

In the Lodash documentation for this function, it specifies that it checks if a value is a plain object - created by the Object constructor or one with a [[Prototype]] of null.

There is a Stack Overflow post discussing the difference between an object and a plain object in JavaScript: The difference between object and plain object in JavaScript?

Expanding on @Viktor Kynchev's answer, depending on what you need from the prop, you can simply convert it to a string, number, or another type accepted by Lodash's isPlainObject method.

For example, if you have a date object provided via Prisma API like the original poster (OP), you can convert it to a string as shown below:

for (const element of newsLetters) {
  element.createdAt = element.createdAt.toString()
}

Answer 9

Answer №5

It's likely that you have this line of code in one of your model fields

createdAt DateTime @default(now())

Date objects cannot be serialized easily. One solution is to use the date-fns npm module

import { formatDistance } from 'date-fns'

const newsLetters = await prisma.newsLetters.findMany();
const serializedNewsLetters= newsLetters.map((newsLetter)=>({
     ...newsLetter, 
     createdAt:formatDistance(new Date(newsLetter.timestamp),new Date())
}))

This approach will provide the distance between the specified dates in a human-readable format.

Check out the formatDistance documentation for more details

Answer 10

It's likely that you have this line of code in one of your model fields

createdAt DateTime @default(now())

Date objects cannot be serialized easily. One solution is to use the date-fns npm module

import { formatDistance } from 'date-fns'

const newsLetters = await prisma.newsLetters.findMany();
const serializedNewsLetters= newsLetters.map((newsLetter)=>({
     ...newsLetter, 
     createdAt:formatDistance(new Date(newsLetter.timestamp),new Date())
}))

This approach will provide the distance between the specified dates in a human-readable format.

Check out the formatDistance documentation for more details

Answer 11

Answer №6

Change your Date object into a String by following this example:


export async function getStaticProps() {
  const productDetails = await getProductDetails()

  return {
    props: {
      productDetails: {
        ...productDetails,
        createdOn: productDetails?.createdOn.toISOString(),
        updatedOn: productDetails?.updatedOn.toISOString(),
      },
    },
  }
}

Answer 12

Change your Date object into a String by following this example:


export async function getStaticProps() {
  const productDetails = await getProductDetails()

  return {
    props: {
      productDetails: {
        ...productDetails,
        createdOn: productDetails?.createdOn.toISOString(),
        updatedOn: productDetails?.updatedOn.toISOString(),
      },
    },
  }
}

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Answer №1

Answer №2

Using with Next.js

Next.js SWC Plugin (experimental, v12.2 or above)

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

Success Notification in ASP.net MVC after Form Submission

Is the input in the array? How to find out?

Having trouble with the authorization aspect of Next Auth. The error message reads: "NextAuth.js does not support the action api with HTTP GET method

Is there a way to verify if the object's ID within an array matches?

Having trouble getting routing to function properly with react-router-dom

Can the hasClass() function be applied to querySelectorAll() in JavaScript?

Tips for enabling resize functionality on individual components one at a time

Tips for managing the sub query in nodejs?

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

Having four videos displayed on one webpage can cause the browser to function at a slower

Creating a custom loading page in Next.js 13: A step-by-step guide

Warning: Node 125008 has reached the maximum number of listeners, indicating a potential memory leak in the EventEmitter

Tips for styling cells in a certain column of an ng-repeat table

Deactivate the button in the final <td> of a table generated using a loop

How to resolve hydration error in Next.js: Issue - Server-rendered HTML content does not match the text content

Causes of the error message 'TypeError: res.render is not a function'

Issue with FullPageJS: scrollOverflow feature not functioning upon click event

Retrieve the content from paragraph elements excluding any text enclosed within span tags using the Document.querySelector method

Add a variety of parameters to the URL in order to make an AJAX request