Error serializing `.meetups[0].title` returned from `getStaticProps` in "/" ` [duplicate]

Question

I'm using next js with MongoDB, I'm getting the error serializing when submitting the form

error Server Error Error: Error serializing .meetups[0].title returned from getStaticProps in "/". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

function HomePage(props){
    return <MeetupList meetup={props.meetups} ></MeetupList>
}


export async function getStaticProps(){

    const client =  await MongoClient.connect("mongodb+srv://User:[email protected]/meetups?retryWrites=true&w=majority");
   
   const db = client.db();
   
   const meetupsCollection =  db.collection("meetups");

   const meetups = await meetupsCollection.find().toArray();

   

   client.close();
   

    return {
      props: {
          meetups : meetups.map(meetup =>( {
              title: meetup.title , 
              address: meetup.address , 
              source: meetup.source ,
              id : meetup._id.toString()
              

          }))
      },
      revalidate: 1
    };
}

export default HomePage;

Answer 1

you should wrap the meetups prop value with JSON.stringify, see below:

return {
        props: {
          meetups: JSON.parse(
            JSON.stringify(
              meetups.map((meetup) => ({
                title: meetup.title,
                address: meetup.address,
                source: meetup.source,
                id: meetup._id.toString(),
              }))
            )
          ),
        },
        revalidate: 1,
      };