cferdinandi/smooth-scroll

`window` is not defined on server-side rendering

Closed this issue · 5 comments

The latest versions aren't working on server side rendering because window doesn't exist, version 14.0.0 works fine.

To reproduce it just import the lib in any javascript server-side rendered app. Example: https://codesandbox.io/s/nextjs-blog-post-example-fhzn4

Since version 14.2.1, the entry point has been changed from ./dist/smooth-scroll.min.js to ./dist/smooth-scroll.polyfills.min.js.

b89161c#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L5-R5

These polyfills contained in its refer to the window object at initialization, which causes an error on the server-side.

if (window.Element && !Element.prototype.closest) {

if (typeof window.CustomEvent === "function") return false;

for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

So I think should change these polyfills to check typeof window, and set it to avoid the process when window object is undefined.
I fixed these polyfills, and It seems to be fine on Next.js and Gatsby.

We can also import a module that does not contain polyfills if it does not support legacy browsers.
import SmoothScroll from 'smooth-scroll/dist/smooth-scroll'.

Should I update the default to NOT be the polyfilled version?

Any thoughts on the above?

closed due to nonresponse

having the same issue