I am using Next.js version 14.2.3 and I am currently trying to retrieve a list of products from Firestore by utilizing the getProducts function from @stripe/firestore-stripe-payments within getServerSideProps. However, I am facing a serialization error:
Server Error
Error: Error serializing.productsreturned fromgetServerSidePropsin "/".
Reason:undefinedcannot be serialized as JSON. Please usenullor omit this value.
This is the relevant portion of my code:
import Head from "next/head"; import Header from "@/components/Header"; import Banner from "@/components/Banner"; import { Movie } from "@/typings"; import requests from "@/utils/requests"; import Row from "@/components/Row"; import useAuth from "@/hooks/useAuth"; import { useRecoilValue } from "recoil"; import { modalState } from "@/atoms/moduleAtom"; import Modal from "@/components/Modal"; import Plans from "@/components/Plans"; import { Product, getProducts } from "@stripe/firestore-stripe-payments"; import payments from "@/lib/stripe"; interface Props { netflixOriginals: Movie[]; trendingNow: Movie[]; topRated: Movie[]; actionMovies: Movie[]; comedyMovies: Movie[]; horrorMovies: Movie[]; romanceMovies: Movie[]; documentaries: Movie[] products: Product[] } const Home = ({ netflixOriginals, actionMovies, comedyMovies, documentaries, horrorMovies, romanceMovies, topRated, trendingNow, products Props) => { console.log(products) const { logout, loading } = useAuth() const showModal = useRecoilValue(modalState) const subscription = false if (loading || subscription === null) return null if (!subscription) return <Plans/> return ( <div this is so we cant scroll when we open the modal className={`relative h-screen bg-gradient-to-b lg:h-[140vh] ${showModal && "!h-screen overflow-hidden"}`} > <Head>
<title>Home - Netflix</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<main className="relative pl-4 pb-24 lg:space-y24 lg:pl-16">
<Banner netflixOriginals={netflixOriginals}/>
<section className="md:space-y-24">
<Row title="Trending Now" movies={trendingNow} />
<Row title="Top Rated" movies={topRated} />
<Row title="Action Thrillers" movies={actionMovies} />
My List Component*/ <Row title="Comedies" movies={comedyMovies} /> <Row title="Scary Movies" movies={horrorMovies} /> <Row title="Romance Movies" movies={romanceMovies} /> <Row title="Documentaries" movies={documentaries} />
</section>
</main> {showModal} && <Modal />
</div> );
} export const getServerSideProps = async () => {
const products = await getProducts(payments, {
includePrices: true,
activeOnly: true }).then((res) => res).catch((error) => console.log(error.message))
const [ netflixOriginals, trendingNow, topRated, actionMovies, comedyMovies, horrorMovies, romanceMovies, documentaries, await Promise.all([ fetch(requests.fetchNetflixOriginals).then((res) => res.json()), fetch(requests.fetchTrending).then((res) => res.json()), fetch(requests.fetchTopRated).then((res) => res.json()), fetch(requests.fetchActionMovies).then((res) => res.json()), fetch(requests.fetchComedyMovies).then((res) => res.json()), fetch(requests.fetchHorrorMovies).then((res) => res.json()), fetch(requests.fetchRomanceMovies).then((res) => res.json()), fetch(requests.fetchDocumentaries).then((res) => res.json()), ]); return { props: { netflixOriginals: netflixOriginals.results, trendingNow: trendingNow.results, topRated: topRated.results, actionMovies: actionMovies.results, comedyMovies: comedyMovies.results, horrorMovies: horrorMovies.results, romanceMovies: romanceMovies.results, documentaries: documentaries.results, products }, }; };
export default Home;What I Attempted:
- I implemented error handling for the getProducts call to ensure that it logs any problems.
- I tried to sanitize the products array by converting undefined values to null using JSON.stringify and JSON.parse.
- I restarted Firebase multiple times, created a new database, and set up new Stripe products.
- I validated the presence of the collection of products in my Firebase database.
- I confirmed that Firebase is correctly connected to my app, as new users are successfully added to the Firebase database during registration. Despite these efforts, the serialization error persists, suggesting that there may still be an undefined value within the products array.
I anticipated the getServerSideProps function to retrieve the products and other movie data without encountering serialization issues, enabling the products array to be passed to the component without any errors.