You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux
Webpack 4 Update
If you're using webpack >= 4, you can set mode
to production
. This will automatically define NODE_ENV
to production
without needing to use the define plugin. https://webpack.js.org/concepts/mode/#mode-production.
It also seems that webpack has updated the -p
flag to automatically define process.env.NODE_ENV
to production
in your bundled code (thanks @x-yuri for pointing this out). So while the answer below is now unnecessary, I'm keeping it there for reference and also as an explanation of how the webpack define plugin works.
Original answer + explanation
TLDR: Use the webpack define plugin to set process.env.NODE_ENV
to production.
Long version:
React, Redux, and many other JS libraries include extra verifications and error logging that make development easier. However, you obviously don't want this in production since these make your codebase larger and slower. These checks are usually wrapped in statements that look like this:
if (process.env.NODE_ENV !== 'production') {
// do development checks
}
The error you're getting is Redux telling you that although you've minified the code, process.env.NODE_ENV
isn't set to production
, so the development checks are still in place. To fix this, you'll want to use the webpack define plugin to set process.env.NODE_ENV
to production.
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
]
};
Note that I'm defining the value of process.env.NODE_ENV
to whatever it's set to for you when you run webpack. So to generate your production bundle, you'll want to run NODE_ENV=production webpack -p
, not just webpack -p
. This will replace any instance of process.env.NODE_ENV
with production
in your bundle. So that check that I showed above will now look like this:
if ('production' !== 'production') {
// do development checks
}
Minifiers are smart enough to detect that the code in the if statement will never happen and will remove it from your production bundle. Thus, you get the best of both worlds: a better development experience and no extra code in your production bundle :)