Next.js 14: undefined Value Error When Serializing products in getServerSideProps #8907

Cypherat · 2024-05-20T10:20:12Z

Cypherat
May 20, 2024

I'm using Next.js 14.2.3 and attempting to fetch a list of products from Firestore using the getProducts function from @stripe/firestore-stripe-payments in getServerSideProps. However, I'm encountering a serialization error:

Server Error
Error: Error serializing .products returned from getServerSideProps in "/".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

Here is the relevant part 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 Tried:

I added error handling for the getProducts call to ensure that it logs any issues.
I attempted 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 verified that the collection of products exists in my Firebase database.
I confirmed that Firebase is properly attached to my app, as new users are successfully added to the Firebase database upon registration. Despite these efforts, the serialization error persists, indicating that there might still be an undefined value within the products array.
I expected the getServerSideProps function to fetch the products and other movie data without encountering serialization issues, allowing the products array to be passed to the component without any errors.
I copied my question from stackoverflow : https://stackoverflow.com/questions/78502654/next-js-14-undefined-value-error-when-serializing-products-in-getserversideprop

Pessimistress · 2024-05-20T14:55:13Z

Pessimistress
May 20, 2024
Maintainer

You are posting in the wrong repo.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js 14: undefined Value Error When Serializing products in getServerSideProps #8907

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Next.js 14: undefined Value Error When Serializing products in getServerSideProps #8907

Cypherat May 20, 2024

Replies: 1 comment

Pessimistress May 20, 2024 Maintainer

Cypherat
May 20, 2024

Pessimistress
May 20, 2024
Maintainer