"window is not defined" error when starting production

[FoxxMD]

In the main.js file built for production I am getting an error when running npm run start

$ npm run start

> react-starter@0.0.0 start /Users/mduncan/FDC/Code/com.fdc.ui
> node lib/server-production


/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:3944
        })( jQuery, window , document );
                    ^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:3944:14)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21890:31)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:1269:2)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.module.exports.desc.applyUpdate (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:150:51)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:52:15)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at /Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:41:18

npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v0.10.35
npm ERR! npm  v2.5.0
npm ERR! code ELIFECYCLE
npm ERR! react-starter@0.0.0 start: `node lib/server-production`
npm ERR! Exit status 8

I am using almost all default settings for my webpack configs. Any suggestions on where to look to find out why this is happening?

[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

[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).

[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();
    }
    ...
}

[juancabrera]

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

[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;

[17Damon]

because server can not find window, you can use this

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

[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).

[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();
    }

[rihannarickeminem]

@troutowicz thank you!

[ghost]

Hy all
I have this problem for server rendering.