window is not defined

[liadbiz]

Hi, guys. i am doing a spa with react rouer. but now there is strange mistake when i do server render.

here is the error stack.

    /home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:536
                return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                                       ^

    ReferenceError: window is not defined
    at /home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:536:31
    at /home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:531:48
    at module.exports (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:553:69)
    at Object.<anonymous> (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:433:38)
    at __webpack_require__ (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:20:30)
    at Object.<anonymous> (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:342:2)
    at __webpack_require__ (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:20:30)
    at Object.<anonymous> (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:174:18)
    at __webpack_require__ (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:20:30)
    at Object.defineProperty.value (/home/zhuhaihao/code/learn-react/aiyo/server.bundle.js:121:15)

i firstly guess that the problem was caused by this jsx syntax <RouterContext></RouterContext>. so i change my code to this way.

    app.get('/*', function(req, res) {
        match({ routes: routes, location: req.url}, (err, redirect, props) => {

      const html = ReactDom.renderToString(React.createElement(RouterContext, props));
      // res.sendFile(path.join(__dirname, 'dist/index.html'));
      res.send(renderPage(html));
      })
   });

but the mistake still exists.

i use react router 2.6.1. so, this tutorial can still catch up with this version? or is there any solutions can solve this problem.

Thanks!

[canibanoglu]

The error tells you that window is not defined. Since you are working on server rendering this is normal, there is no window object at server-side render-time.

I don't think this has anything to do with react-router and I think this should better be asked on stackoverflow as its a usage question.

[timdorr]

It looks like you're using some other library that is checking for the version of the browser, but on the server (where there is no browser, and therefore no window). I would remove that library to make things work or try to use it inside of React lifecycle methods that don't run on the server (componentDidMount is one).

[liadbiz]

@timdorr thank you! I found out this problem already. but forgot to close this issue. sorry to bother you....

[TaeKimJR]

@liadbiz Could you elaborate on what the issue was? I am seeing something similar.

[liadbiz]

@TaeKimJR
I have tried to use a front ui framework called Amazeui with react router. but when i do server renderring , it seems to one of the js files of that framework try to get use window object. so i am not using that framework now..... however, there are other ways to solve this problem or i use the framework in a wrong way while i don`t have time to focused on that.

hope that will help. Good luck!