🗂

cannot be serialized as JSON. Please only return JSON serializable

2022/03/05に公開

自分用メモ。getStaticPropsやgetServersideProps で JSON serialize できないエラー。
https://github.com/vercel/next.js/issues/11993

↓これをgetStaticPropsで受け取ってreturnするとエラーが起こった。

const events = Object.keys(data).map((key) => ({
	id: key,
	title: data[key].title,
	description: data[key].description,
	location: data[key].location,
	date: data[key].date,
	image: data[key].image,
	isFeatured: data[key].isFeatured,
}));

return events;
export const getStaticProps = async () => {
	const events = await getAllEvents();
	return { props: { events: events } };
};

一度、explicitly JSON.strinify するとなぜかエラーが起きなくなる。謎。

return JSON.parse(JSON.stringify(events));

for in で オブジェクト型の配列にすると、エラーが起こらない。
Object.keys の仕様が関係しているのか。そのうち解明する。

let events = [];
	for (const key in data) {
		events = [
			...events,
			{
				id: key,
				...data[key],
			},
		];
	}
	return events;

Discussion