Error serializing as JSON in getServerSideProps in next js and typescript while fetching products from stripe payments

Question

Error showing in my localhost

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

my code

import { getProducts, Product } from '@stripe/firestore-stripe-payments';
import Head from 'next/head'
import { useRecoilValue } from 'recoil';
import { modalState } from '../atoms/modalAtoms';
import Banner from '../components/Banner'
import Header from '../components/Header'
import Modal from '../components/Modal';
import Plans from '../components/Plans';
import Row from '../components/Row';
import useAuth from '../hooks/useAuth';
import payments from '../lib/stripe';
import { Movie } from '../typings';
import requests from '../utils/requests'

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 {loading} = useAuth();
    const showModal = useRecoilValue(modalState)
    const subscription = false

   if(loading || subscription === null){
    return (
      null
    )
   }

   if(!subscription) return <Plans/>

  return (
    <div className={`relative h-screen bg-gradient-to-b lg:h-[140vh]${
        showModal && '!h-screen overflow-hidden'
      }`}>
      <Head>
        <title>Netflix - Home</title>
        <link rel="icon" href="/netflix.png" />
      </Head>
      <Header/>
      <main className='relative pl-4 lg:pb-24 lg:space-y-24 lg:pl-16 md:pb-20'>
      <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 */}
          

          <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 default Home

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,
    },
  }
}

Answer 1

This is usually caused by undefined properties returned from firestore .

The best way to handle this is to add ignoreUndefinedProperties: true to your firebaseConfig as described here .

Error serializing as JSON in getServerSideProps in next js and typescript while fetching products from stripe payments

Question

1 answers

solution1
0 2022-10-05 08:59:48

Error serializing as JSON in getServerSideProps in next js and typescript while fetching products from stripe payments

Question

1 answers

solution1 0 2022-10-05 08:59:48

solution1
0 2022-10-05 08:59:48