Third Party Library Provider Window not defined, even with conditional rendering
Unanswered
English Lop posted this in #help-forum
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
I'm thinking that 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.