CODEWITHSUNDEEP
javascriptreactjsnext.js
Sour_sr
Sour_sr

Reputation: 223

nextjs RangeError: Maximum call stack size exceeded

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?

Upvotes: 14

Views: 31323

Answers (7)

Konrad Grzyb
Konrad Grzyb

Reputation: 1995

Serialize data

I didn't serialize data passed from the server to the client component as mentioned here.

If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be serializable by React.

So in server component when u use client component u can pass serialized data in a way:

<div>
   <ClientComponent serializedData={JSON.stringify(data)} />}
</div>

or pass only serializable props in example:

<div>
   <ClientComponent id={data.id} name={data.name} />}
</div>

where id and name is a string

Upvotes: 6

Md Faizan
Md Faizan

Reputation: 11

this error occur when exceed returing --(return { massage: "Page created", status: true, payload: payload, };)-- data size from server action so reduce returnning data then this will work properly

Upvotes: 1

Mehdi Faraji
Mehdi Faraji

Reputation: 3836

In my case, I had a wrong import name for a component because I changed it's name and forgot to change the import statements in pages. Fixed the issue by changing the component import name.

Upvotes: 0

Sanjay
Sanjay

Reputation: 881

This once happened to me where I was accidentaly importing the component into itself. Inside Layout.js had import RightPanel from "./" instead of import RightPanel from "../pages/rightPanel".

Upvotes: 5

EDMOND GIHOZO
EDMOND GIHOZO

Reputation: 345

I was having the same error , using nodejs version 16,, but when I downgraded it to version 14 , the dissappeared..

to downgrade you can do

npm install -g n

then run:

n 14.17.4

after this delete you node_modules folder , and restart the application again.

Upvotes: 0

KeshavDulal
KeshavDulal

Reputation: 4164

One fine day, this error did come knocking out of nowhere on a nextjs project I was working.

...
maximum call stack size exceeded
event - build page: /next/dist/pages/_error
wait  - compiling...
error - static/chunks/pages/_app.js
...

A good old

rm -rf node_modules
yarn

did the trick for me.

Upvotes: 1

juliomalves
juliomalves

Reputation: 50308

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

Upvotes: 8

Related Questions