[Solved] React + webpack: ‘process.env’ is undefined
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.
In your webpack config, there are two options that can affect process.env:
- When you specify
config.target(seeconfig.target) - When you define the
process.envvariable viaDefinePlugin
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.
This answer made more sense to me. Posting for others with the same need for a complete example.
This is the simplest way:
new webpack.EnvironmentPlugin( { ...process.env } )
Add that to your list of webpack plugins.