How to fix undefined `undefined` cannot be serialized as JSON. Please use `null` or omit this value using getServerSideProps

Question

I'm working with Next.js trying to getServerSideProps and and getting this error:

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

import requests from '../utils/requests'


  export async function getServerSideProps(context) {
  const genre = context.query.genre;

  const request = await fetch(
    `https://api.themoviedb.org/3${
      requests[genre]?.url || requests.fetchTrending.url
    }`
  ).then((res) =>  res.json());
     
   return {
    props: {
      results: request.results,
    },
  };
}

utils/request.js

const API_KEY = process.env.API_KEY

export default {
    fetchTrending: {
        title: 'Trending',
        url: `/treanding/all/week?api_key=${API_KEY}&language=en-US`
    },
    fetchTopRated: {
        title: 'Top Rated',
        url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`
    },
    fetchActionMovie: {
        title: 'Action',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=28`
    },
    fetchComedyMovie: {
        title: 'Comedy',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=35`
    },
    fetchHorrorMovies: {
        title: 'Horror',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=27`
    },
    fetchRomanceMovies: {
        title: 'Romance',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=10749`
    },
    fetchMystery: {
        title: 'Mystery',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=9648`
    },
    fetchSciFi: {
        title: 'Sci-Fi',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=878`
    },
    fetchWestern: {
        title: 'Western',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=37`
    },
    fetchAnimatoin: {
        title: 'Animatoin',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=16`
    },
    fetchTV: {
        title: 'TV Movie',
        url: `/discover/movie?api_key=${API_KEY}&with_genres=10770`
    },
}

How to fix this problem.

Are you getting the expected response from the API request? It looks like `request.results` is `undefined`, which is causing the error. Alternatively, you could default its value to `null` with `{ props: { results: request.results ?? null } }` to make the error go away. — juliomalves, Jul 29 '22 at 21:55

How to fix undefined `undefined` cannot be serialized as JSON. Please use `null` or omit this value using getServerSideProps

0 Answers0