ReferenceError: window is not defined about reactscrollbar HOT 12 CLOSED

Seems to not be working for gatsby apps.

from reactscrollbar.

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

from reactscrollbar.

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?

from reactscrollbar.

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)?

from reactscrollbar.

I would consider using functionality tests rather than user agents

from reactscrollbar.

@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.

from reactscrollbar.

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.

from reactscrollbar.

Good plan. Thanks again @souhe.

from reactscrollbar.

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

from reactscrollbar.

@magalhas Good job! 👍

from reactscrollbar.

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.

from reactscrollbar.

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

from reactscrollbar.