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

Question

This question already has answers here:
Error serializing `.remarkBody` returned from `getStaticProps` . Reason: `undefined` cannot be serialized as JSON
(2 answers)
Closed 11 months ago.
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:Password#cluster0.random.mongodb.net/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,
};