React + webpack: 'process.env' is undefined

Question

I'm trying to run the hot dev server on our site with webpack; the site uses ReactJS, which has this code in it:

if (\"production\" !== process.env.NODE_ENV) // etc

When not running hot-swap it's fine, but with the hot-swap, it gets run, resulting in the error:

TypeError: process.env is undefined

The code looks like this:

The project is modelled after https://github.com/webpack/react-starter which does work; so the question is; what error have I made in the config file and/or how do I go about looking for the error when the 'production' compilation works just fine?

I've posted the gist of the webpack config file.

Answer 1

In your webpack config, there are two options that can affect process.env:

• When you specify config.target (see config.target)
• When you define the process.env variable via DefinePlugin

Looking at your code, it looks like process.env might be undefined when both options.prerender and options.minimize are false.

You could fix this by always using an environment that defines process.env (ex: node), or by using DefinePlugin to assign a default value to the variable yourself.

Answer 2

This answer made more sense to me. Posting for others with the same need for a complete example.

https://github.com/webpack/webpack/issues/868

Answer 3

This is the simplest way:

new webpack.EnvironmentPlugin( { ...process.env } )

Add that to your list of webpack plugins.