`window` used directly in library breaks SSR environments
See original GitHub issueHey,
By using window
“on root level” developers that build extension with some SSR framework (nextjs, nuxt, Gatsby, etc) have troubles. It’s because on server-part window
is not available and there are errors because of that.
Solution: there should be simple condition that takes into account that window
might be undefined. It’s gonna make lives of a lot of devs easier 😃
This issue is example of this: https://github.com/contentful/ui-extensions-sdk/issues/344 - the solution works, but it makes extension load slower and hence user experience is worse and developers must build complex workarounds with lazy loading contentful SDK into their apps which is completely unnecessary.
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Inconsistent SSR require/import paths on Windows #6080
It seems that in older versions Vite (on Windows) used to always resolve to non-POSIX paths resulting in both options being seeded in...
Read more >How to Use a Library in Next.JS That Wants Window.Whatever
js framework, SSR broke because react-chat-widget assumes it's running in a browser environment and so has access to the window object. The ...
Read more >Using window in React SSR: The Complete Guide
During a component render, use the useIsSsr hook. If outside of a component render, then directly check typeof window === "undefined" to see...
Read more >NextJS / React SSR: 21 Universal Data Fetching Patterns ...
You'll notice that we're introducing three possible states for the "isWindowFocused" action: pristine, focused and blurred. Why three states?
Read more >Advanced Features: Next.js Compiler
We chose to build on SWC for a few reasons: Extensibility: SWC can be used as a Crate inside Next.js, without having to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Jwhiles sorry for silence.
It’s very simple. I have ecommerce in next.js and want to quickly create custom Contentful extension. The easiest way for me to do this is to create new page in my next app (
/__contentful-field-extension
) - this page will be Contentful extension. Setting up totally separate environment only for the purpose of small Contentful extension is annoying.Frameworks like next.js are “SSR-first” and you can’t prevent next from doing SSR. And it doesn’t apply only to next, it applies to most modern next-like frameworks (Gatsby, nuxt).
The fix is super simple, you must assume that
window
can be undefined and let the app build. Ifwindow
is undefined you can assume you’re on the server and you can do “nothing”. It would help a lot.@andipaetzold @Jwhiles I too am hitting the same issue and I feel that it should be fixed on contentfuls side and not force the break of SSR. Otherwise you’re forcing the issue over to developers to apply the same work around again and again, when it could be simply fixed where the problem actually arises.
As @r00dY points out, it would really help out a lot! Many thanks