ReferenceError: window is not defined at build time for dynamic import

[yoannfleurydev]

I am trying to setup a NextJS application based on Start UI that will use keycloak-js in the app folder which is not Server Side Rendered.

Keycloak is only imported in the App component and exported in a file in the app/config folder.

import { useEffect } from 'react';

import { keycloak } from '@/app/config/keycloak';

import { AppContent } from './AppContent';
import { AppProviders } from './AppProviders';

export const App = () => {
  useEffect(() => {
    keycloak.init({
      flow: 'implicit',
      onLoad: 'check-sso',
      silentCheckSsoRedirectUri:
        window.location.origin + `/silent-check-sso.html`,
    });
  }, []);

  return (
    <AppProviders>
      <AppContent />
    </AppProviders>
  );
};

keycloak.ts has the following content:

import Keycloak from 'keycloak-js';

import { isBrowser } from '@/utils/ssr';

export const keycloak = isBrowser ? Keycloak('/keycloak.json') : undefined;

The App component is dynamically imported in the entrypoint of the project, app.tsx in ssr=false mode.

const AppComponent = dynamic(() => import('@/app').then((mod) => mod.App), {
  ssr: false,
  loading: () => <Loading />,
});

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setIsLoading(false);
  }, []);

  return isLoading ? <Loading /> : <AppComponent />;
};
export default App;

Still, the yarn build (next build) is failing (I think it is at the Collecting page data step, but the stacktrace is not displaying it):

yarn run v1.22.10
$ next build
info  - Using external babel configuration from /Users/yfleury/work/c/.babelrc
info  - Creating an optimized production build  
info  - Compiled successfully

> Build error occurred
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/yfleury/work/c/node_modules/keycloak-js/dist/keycloak.js:63:4)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.ofJT (/Users/yfleury/work/c/.next/server/pages/index.js:4053:18)
    at __webpack_require__ (/Users/yfleury/work/c/.next/server/pages/index.js:23:31)
    at Object.jVUx (/Users/yfleury/work/c/.next/server/pages/index.js:4041:69) {
  type: 'ReferenceError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It is like the dynamic import and/or the SSR false are not helpful.

💡 The yarn dev is working great.

[yoannfleurydev]

At the moment, I bypassed this issue by using https://github.com/react-keycloak/react-keycloak but I'm not satisfied as we may encounter this problem with other libraries in the future.

[yoannfleurydev]

Closing this one as wont do, we will less and less encounter those issues in the future with SSR taking more space. We will reopen if needed.