nextjs RangeError: Maximum call stack size exceeded

Question

import React from "react";
import "../assets/style/global.scss";
import cookies from "next-cookies";
import client from "../lib/api/client";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await MyApp.getInitialProps(appContext);
  const { ctx } = appContext;
  const allCookies = cookies(ctx);
  const token = allCookies["accessToken"];
  if (token !== undefined) {
    client.defaults.headers.Authorization = token;
  }

  return { ...appProps };
};

export default MyApp;

When logging in, we try to put the access token in a cookie and put the cookie value in the header in every api request. But I get this error. How can I fix it?

Answer 1

You get that error because you're generating an infinite loop by calling MyApp.getInitialProps(appContext) inside MyApp.getInitialProps.

Simply replace that line with an App.getInitialProps call instead.

// ...
import App from 'next/app'

// ...

MyApp.getInitialProps = async (appContext) => {
    const appProps = await App.getInitialProps(appContext);
    // ...

    return { ...appProps };
};