Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reference Error window is not defined when importing Provider in nextjs

See original GitHub issue

Issue and Steps to Reproduce

Create a Nextjs application.
add @axa-fr/react-oidc-context package
import provider in _app.js import { AuthenticationProvider } from "@axa-fr/react-oidc-context";
Congratulations, you have the error

The issue take place in withRouter and since it uses window even a simple import of Provider causes reference error since window is undefined on node server.

ReferenceError: window is not defined
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/routes/withRouter.js:46:38)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/default-component/SessionLost.component.js:7:36)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
error - ReferenceError: window is not defined
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/routes/withRouter.js:46:38)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/default-component/SessionLost.component.js:7:36)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
ReferenceError: window is not defined
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/routes/withRouter.js:46:38)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object.<anonymous> (/Users/ramin/Documents/Sonbol/next-ids4/node_modules/@axa-fr/react-oidc-core/dist/default-component/SessionLost.component.js:7:36)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)

Additional Details

Installed packages: @axa-fr/react-oidc-context oidc-client

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:12 (6 by maintainers)

Top GitHub Comments

3reactions

guillaume-chervetcommented, Apr 22, 2022

I think i will build a full demo with nextjs. It will help to maintain the compatibility and improve the documentation.

3reactions

Reelshrimpboatcommented, May 8, 2021

I found a work around for now, you can use next/dynamic to load dynamically with SSR diasbled, so create a component like:

import { AuthenticationProvider, oidcLog } from '@axa-fr/react-oidc-context';
import oidcConfiguration from 'constants/OidcConfig';

interface Props {
  children: React.ReactNode;
}

export default function AuthProvier(props: Props){
  const {children} = props;
  return (
    <AuthenticationProvider configuration={oidcConfiguration} loggerLevel={oidcLog.DEBUG} isEnabled={true}>
      {children}
    </AuthenticationProvider>
  )
}

then import to your app.jsx/tsx like:

import dynamic from 'next/dynamic'

const AuthProvider = dynamic(() => import('constants/AuthProvider'), {
  ssr: false
})

Then you can wrap anything the same way you would if you were using <AuthenticationProvider>. Seems like this has to be done with pretty much everything from this lib when using it in a nextJs app unfortunately