Importing non-react based modules that depend on the window.

[jacquesporveau]

NEXT.JS Question.

Hey, I am working on implementing auth for a site and the auth provider instance that I have to work with relies on browser storage being present in order to function properly.

Every time that I import this module however I get errors related to the window not being present. I figured that I might try the dynamic import function provided by Next and use the ssr: false option but that dynamic function clearly expects to work in conjunction with a module that exports a react component.

Does anyone have an idea of how to import a module that relies on the window that isn't a react component?

[jamesmosier]

You had the right idea with next/dynamic and ssr: false but typically I just put whatever library needs access to browser APIs behind a ssr: false component:

pages/index.js

const MyAuthComponent = dynamic(
  () => import('../components/MyAuthComponent'),
  { ssr: false }
)

export default function Index() {
  return (
    <MyAuthComponent />
  )
}

MyAuthComponent.js

import AuthLibrary from 'auth-library'

export default function MyAuthComponent() {
  // use your authLibrary 
  return <div>auth component</div>
}

[jacquesporveau]

This is what I ended up going with as well. Thanks!