Server Side Rendering error

Question

Server Side Rendering error

ilusharulkov opened this issue 8 years ago · comments

Hello!
There is server side rendering when try to use react-redux-spinner. The problem with window object:

ReferenceError: window is not defined
/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:200
            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
Stack:
  at /Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:200:31
    at memoize (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:195:48)
    at module.exports (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:217:69)
    at Object.<anonymous> (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:97:37)
    at __webpack_require__ (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:30:30)
    at Object.<anonymous> (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:71:2)
    at __webpack_require__ (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:30:30)
    at Object.defineProperty.value (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:57:19)
    at __webpack_require__ (/Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:30:30)
    at /Users/admin/mt_front/node_modules/react-redux-spinner/dist/index.js:50:18

Chris Sainty · Answer 1 · Thu Jul 28 2016 21:58:00 GMT+0800 (China Standard Time)

We are not doing any server-side rendering for me to test with quickly.
In this case I expect we can just shortcut the test. But without a test environment I can't be sure that is the only fix needed.

Ivan Matiishyn · Answer 2 · Wed Aug 10 2016 21:18:24 GMT+0800 (China Standard Time)

I have the same issue

Daniele · Answer 3 · Thu Sep 15 2016 18:41:14 GMT+0800 (China Standard Time)

Same issue for me as well!

Alexander Pochill · Answer 4 · Fri Dec 02 2016 20:13:54 GMT+0800 (China Standard Time)

We're not doing any server-side rendering at the moment.

We'd be happy to accept pull requests to get this working!

Alexander Pochill · Answer 5 · Mon Apr 10 2017 19:49:12 GMT+0800 (China Standard Time)

This may be fixed with v0.6.0. We're now using webpack to export an UMD bundle. Anyone doing server-side rendering willing to try? It's published to npm.

Stephan Herzog · Answer 6 · Mon Jun 12 2017 18:23:31 GMT+0800 (China Standard Time)

I had a bit of time to inspect this and the offending code results from building Webpack's style-loader into the final release bundle (there are possibly more dependencies with unsafe access of document or window properties). I am not sure how much time I can get to inspect. If it is enough to come up with useful information I will update this issue.

Stephan Herzog · Answer 7 · Tue Oct 31 2017 03:02:27 GMT+0800 (China Standard Time)

One possible way around it is requiring the css only in browser environments: https://github.com/sthzg/react-redux-spinner/commit/807ac609acc8d436ed193b930d853f8d60367f4b

This introduces one dependency (exenv) which has a minimal footprint. To avoid the dependency, the canUseDOM check could easily be ported to this project.

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

Another way to solve the problem could be using universal style loader like https://github.com/kriasoft/isomorphic-style-loader. Could be a little more overhead though.

Would be awesome to craft an MR for this, so I'd be happy to hear your feedback and find a solution for SSR.

Alexander Pochill · Answer 8 · Wed Nov 01 2017 16:08:00 GMT+0800 (China Standard Time)

Thank you for investigating.
I believe the best course of action would be to simply not include the css in the bundle. This would have multiple benefits such as working for SSR, reducing bundle size and simplifying build steps.

Of course the drawback is that any integration would need to manually include the css - but this is how all major frameworks which include css does it (e.g. bootstrap, foundation, react-md etc).

I'll make the necessary changes and see what it will look like!

Stephan Herzog · Answer 9 · Wed Nov 01 2017 16:22:27 GMT+0800 (China Standard Time)

Thanks for taking the time. I totally agree that not bundling the css is the most elegant solution. Looking forward to the update.

Alexander Pochill · Answer 10 · Wed Nov 01 2017 17:20:16 GMT+0800 (China Standard Time)

If you want to test it, you could check out the branch no-css-in-bundle, run yarn then yarn build (this will create dist/react-redux-spinner.js and dist/react-redux-spinner.css).

Now running yarn link in the react-redux-spinner.
Then run yarn link react-redux-spinner in your project and it "should" be the same as if you installed it from npm

Stephan Herzog · Answer 11 · Thu Nov 02 2017 01:15:26 GMT+0800 (China Standard Time)

Thanks @noseglid. I didn't get to it today, but I will test the branch tomorrow morning and report back to you.

Stephan Herzog · Answer 12 · Mon Nov 06 2017 18:46:47 GMT+0800 (China Standard Time)

Sorry that it took me longer than promised to respond.

The no-css-in-bundle branch works as expected, except that I ran into a problem after the commit that refactors prop-types to an external. It leads to a Can't resolve 'PropTypes' error, although the peer dependency in our host project is fulfilled. I need to check whether it is something related to our Webpack config.

Alexander Pochill · Answer 13 · Mon Nov 06 2017 18:51:34 GMT+0800 (China Standard Time)

No worries. I appreciate your help!

~~I yarn gets a bit weirded out when linking and externals. I'm fairly certain it wont be an issue when installed "for real" meaning it will be in the same dependency structure.~~

There was an issue how externals were defined. Fixed in v1.0.1

I'll make a release out of this!