React-starter-kit: How to deal with 'window is not defined' with front end packages

Created on 2 Jun 2017  路  2Comments  路  Source: kriasoft/react-starter-kit

Because react-starter-kit is server side rendered, there are a bunch of react npm packages that use the browser objects such as 'window' among others, that do not work. Typically, I get a 'window is not defined' error in node because these things obviously don't exist in node.

What is the best approach for using these packages? Is there a way to fake these browser objects such as 'window' in node so that I can use the packages?

specifically I want to use the halogen package and the react-id-swiper package.

I tried adding a fake window object in server.js file (as seen below), but that didn't work. Or perhaps there is a way to implement js-dom library to catch all the errors but I haven't gotten it to work either

in server.js file:
global.window = new Object();

Typical error in node.js console when a front-end package is referenced:

ReferenceError: window is not defined
    at /Users/app/node_modules/swiper/dist/js/swiper.js:4497:22
    at /Users/app/node_modules/swiper/dist/js/swiper.js:4499:11
    at Object.<anonymous> (/Users/app/node_modules/swiper/dist/js/swiper.js:5338:3)

All 2 comments

There are plenty ways what you can do, please use search for them. For example:

How to render a component on client-side only? #186

Yep, thanks! Wasn't searching with the right question.

Was this page helpful?
0 / 5 - 0 ratings