ReferenceError: window is not defined

[tastywheat]

I'm getting ReferenceError: window is not defined errors during my build process, is there a way around this?

[souhe]

Could you give me some more details?
I have no idea why you get 'window is not defined' error.

[ekron]

I have a slightly different version of the same problem.

For me, the ReferenceError: window is not defined is thrown when the lib is running on the server and tries to access window and document browser globals.

ScrollArea.jsx:

ScrollArea.defaultProps = {
    speed: 1,
    vertical: true,
    horizontal: true,
    contentWindow: window,
    ownerDocument: document
};

And:

ScrollBar.defaultProps = {
    type : 'vertical',
    ownerDocument: document
}

The next problem is when the build process uses the webpack style loader to load the .less styles.

The resulting output gives you the same error -- because the style loader code in the build also tries to window and document globals.

e.g.:

isOldIE = memoize(function() {
        return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
    }),

... it also heavily uses the document global. (The loader is not intended to run server-side.)

If react-scrollbar is intended for use in universal apps, a build process tweak and some guards around window, document and browser-specific code may be a fix?

[souhe]

You're right, window and document could be a huge problem for universal/isomorphic apps. I'll think about solving that problem. And of course I'll solve it!

I have one question about your second issue. You get that error during your build process or when you run app on the server (because of my loaded css styles into js file)?

[marksyzm]

I would consider using functionality tests rather than user agents

[ekron]

@souhe Sorry for the slow response and thanks for creating the component. With regard to:

I have one question about your second issue. You get that error during your build process or when you run app on the server (because of my loaded css styles into js file)?

The style-loader code I mentioned is included the react-scrollbar package (in the minified code in react-scrollbar/dist/scrollArea.js). The resulting built code looks for universal browser variables and fails on the server.

My guess is that using style-loader to build this package is the source of the problem. See this.

Hope that helps.

[souhe]

Thanks @ekron

Yes, that's style-loader issue. For universal apps the best solution would be probably using react-scrollbar in nocss version (see issue #30 ). I've did that change(it's on dev branch) but I'll merge it into master with release 0.4.0.

I'll also make sure that window and document references in react-scrollbar will be mocked up or removed.

[ekron]

Good plan. Thanks again @souhe.

[magalhas]

I've submitted a PR to style-loader that I think that solves this.

[souhe]

@magalhas Good job! 👍

[souhe]

I've just published version v.0.4.0 with possibility to require react-scrollbar in no-css version. I also made sure that window and document references in react-scrollbar don't make troubles in universal apps.

Until @magalhas PR will not be merged I recommended to use no-css version of react-scrollbar while server rendering.
So I'm closing that issue.

[ozyman42]

Seems to not be working for gatsby apps.

[devnax]

NextJs also, It's showing ReferenceError: window is not defined