React Inline Style: ReferenceError: window is not defined

Question

I have this error when i import the SCSS stylesheet in React Component:

server.js:614 return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); ^

ReferenceError: window is not defined

This is my Home.jsx

Why???

score 0 · Accepted Answer · answered Feb 25 '16 at 10:16

Because you are render your view on the Server and in the server (node.js) we don't have window object

Change your code to render on the client side use componentDidMount event and flag

export default class AsyncMap extends Component {

  state = {
    inBrowser: false
  }

  componentDidMount() {
    this.setState({inBrowser: true});
  }

  yourCurrentRender() {...}

  render() {
    let res = null;
    if (this.state.inBrowser) {
      res = this.renderNewBehavior();
    } else {
      res = <span>Loading</span>;
    }
    return res;
  }
}

Attention, setState inside componentDidMount can cause infinite loop because there's no break condition! [read more](http://stackoverflow.com/questions/30528348/setstate-inside-of-componentdidupdate) — Spidi, Feb 28 '16 at 18:35

score -1 · Answer 2 · answered Apr 29 '16 at 08:23

window object is available only on the client side

1.* First step is to make sure you are not doing a server side rendering, window object is available only on the browser.

2.* Second if you are using webpack and running your application on the webpack-dev-server mode your window objects are not detectable so instead of

localhost: 8080/webpack-dev-server/

try

localhost: 8080/

React Inline Style: ReferenceError: window is not defined

2 Answers2