"window is not defined" error when starting production about react-starter

[troutowicz]

@Frikki Dependency declarations should be kept at the top of files. A better solution for your case would be to do a conditional require at the top of your component.

const isBrowser = typeof window !== 'undefined';
const MyWindowDependentLibrary = isBrowser ? require( 'path/to/library') : undefined;

[Frikki]

@sokra How do you exclude a library from prerendering?

Update
I figured I shouldn’t import the library outside the class definition, but instead require it in the componentDidMount method or a called method thereof.

So, instead of:

...
import MyWindowDependentLibrary from 'path/to/library';
...
export default class MyClass extends React.Component {
    ...
    componentDidMount() { MyWindowDependentLibrary.doWork(); }
    ...
}

I did:

// removed import
...
export default class MyClass extends React.Component {
    ...
    componentDidMount() {
        const MyWindowDependentLibrary = require( 'path/to/library' );
        MyWindowDependentLibrary.doWork();
    }
    ...
}

[barrystaes]

It looks like you are using window somewhere (for jQuery ?) and this variable sometimes (notably serverside) sometimes does not exist.

Try this fix i did in my ReactPlayground: https://github.com/barrystaes/ReactPlayground/commit/111503b23daaecc944ca0ce8f6ffa6430cd4b509

[17Damon]

because server can not find window, you can use this

getInitialState() {
return {windowWidth: (typeof window !== 'undefined')? window.innerWidth:undefined};
},

[Andriy-Kulak]

Also, another trick you can use below! :-) I ran into the same error and saw some universal/isomorphic react/node boilerplates use this

   if (process.env.BROWSER) {
      devToolsExtension = window.devToolsExtension();
    }

[FoxxMD]

thanks! I will give that a try. Also I figured out that this only happens when using the prerender build option so it's not critical as I'm not using that for production.

[sokra]

Don't use libraries that depend on window in your components.
or
Only use these libraries in componentDidMount and exclude them for prerendering (make sure your component don't render different in prerendering or it doesn't work).

[juancabrera]

@Frikki thank you! had the same issue and this fix it. 👍

[derekdreery]

You can't use conditional requires in ES6 module syntax. For this I tend to write no-op implementations of anything that is client-specific (alternatively they could throw on the server, to point out that their use is an error).

[rihannarickeminem]

@troutowicz thank you!

Hy all
I have this problem for server rendering.