Error: Circular structure in "getInitialProps" with Custom _app.js

[bymoe]

I have a custom _app.js with getInitialProps where I do fetch some global data I need for my entire app.

_app.js

const MyApp = ({ Component, pageProps, portalLayout, serverError }) => {
  return (
    <LayoutContextProvider value={{ layout: portalLayout }}>
      <Component {...pageProps} serverError={serverError} />
    </LayoutContextProvider>
  );
};

MyApp.getInitialProps = async (appContext) => {
  if (typeof window === "undefined") {
    const subdomain = getSubdomain(appContext.ctx.req);
    const res = await fetch(
      `https://MYAPIWEBSITE.com/api/candidate/v1/portal?sub_domain=${subdomain}`
    );
    const data = await res.json();
    // Check for server-side errors;
    const serverError = res.ok ? false : res.status;
    return {
      serverError,
      portalLayout: data.results.portal
    };
  } else {
    return {};
  }
};

Now I do have this component with dynamic parameter
src/pages/video/assessment/[key].js
The problem is getInitialProps in this file is not called. And even if it's called after adding this to _app.js:

const appProps = await App.getInitialProps(appContext)
...
 return {
      ...appProps,
      serverError,
      portalLayout: data.results.portal
    };
 

Am I getting Error: Circular structure in "getInitialProps" because the res and the req props are passed down to each component with getInitialProps.

Any help? How can I freely use getInitialProps in custom _app.js and in my other pages and pass down the props the component needs without the ones that cause Circular structure error.

[jamesmosier]

Inside your _app.js getInitialProps, you need to call the components getInitialprops via Component.getInitialProps(ctx);

MyApp.getInitialProps = async ({ Component, ctx }) {
  let pageProps = {};

  if (Component.getInitialProps) {
    // call the current component's getInitialProps
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
}