search

kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.69k stars 4.16k forks source link

How to deal with 'window is not defined' with front end packages #1290

Closed Andriy-Kulak closed 7 years ago

Andriy-Kulak commented 7 years ago

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)
frenzzy commented 7 years ago

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

Andriy-Kulak commented 7 years ago

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