Next.js Discord

Discord Forum

Third Party Library Provider Window not defined, even with conditional rendering

Unanswered
English Lop posted this in #help-forum
Open in Discord
English LopOP
Hi, we're moving a CRA app over to Nextjs with app router, and running into an issue with a small vendor's provider component. Getting the ReferenceError: window is not defined issue. Here's the code that we expected to work:

// generic conditional parent
const ConditionalWrapper = ({ children, condition, wrapper }) => {
  if (condition) {
    return wrapper(children)
  }
  return children
}

// providers
const RootLevelProviders = ({ children }) => {
   <ConditionalWrapper
     condition={typeof window !== "undefined"}
     wrapper={c => <ThirdPartyProvider>{c}</ThirdPartyProvider>}>
       {children}
   </ConditionalWrapper>
}


I'm thinking that the ThirdPartyProvider is likely accessing window outside of the function component. Is our only recourse to use dynamic with ssr: false? My understanding is that if we do that, all the children will also not render on the server, which defeats a lot of what we want.

0 Replies