Refesh page got error: "Server Error ReferenceError: window is not defined"

[Duc (David) Tran]

When using NextJS, the component imported by next/dynamic, srr: false for wrapping all app in _app.tsx, like this:

import dynamic from "next/dynamic";
const SubstrateContextProvider = dynamic(
  () =>    import("ts-substrate-lib").then((data) => data.SubstrateContextProvider), {ssr: false});

function MyApp({ Component, pageProps }: AppProps) {
...
  return (
    <SubstrateContextProvider>
      <MainLayout>{getLayout(<PageContent {...pageProps} />)}</MainLayout>
    </SubstrateContextProvider>
  );
}
export default MyApp

In the other route, eg: /about, everthing is oke util refresh this page
=> get an error: Server Error ReferenceError: window is not defined

Record

[Duc (David) Tran]

• Done

[Duc (David) Tran]

src/pages/_app.tsx

const SubstrateConnectionLayout = dynamic(
  () =>
    import("ts-substrate-lib").then((data) => data.SubstrateConnectionLayout),
  {
    ssr: false,
    loading: () => <div>Loading...div>
  }
);

function MyApp({ Component, pageProps }: AppProps) {
...

  return (
    <SubstrateConnectionLayout>
      ...
    </SubstrateConnectionLayout>
  );
}

export default MyApp;

src/pages/about.tsx

const AppScreen = dynamic(
  () => import("@screens/app").then((data) => data.AppScreen),
  {
    ssr: false,
  }
);

const App: IPageComponent = () => {
  return <AppScreen />;
};

App.getLayout = (screen) => <ScreenLayout>{screen}</ScreenLayout>;

export default App;