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

Ways to prevent false activation of functions due to changes and clicks

What is the best way to utilize node exec in synchronous mode?

Ways to determine if prototype methods vary

Discovering descendant div elements

Guide to substituting the index value with the user's specific choice

javascript function not being invoked

The withAuth module is not exported in the next-auth package for Next.js

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

The ng-bind directive is functional when used with a textarea element, but it does not work with

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

The browser is not showing JavaScript alerts and prompts when they are called inside a function

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

Deciding whether an altered image has been successfully loaded

Easily fetching data with AJAX through jQuery

What is the correct method for launching a modal window in wagtail-admin?

What is the best way to transfer a file input to an azure blob in a Next.js environment?

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Embed Custom Component Into NextJS Link

What could be causing the 500 response code when making a request to the NextJS API route within the app directory?

How can I display several custom markers that are constantly updating on a Google map with MySQL and PHP?