You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux

reactjs, redux, webpack

Solution

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 :)

Problem

Original source

Related problems

• Passing environment-dependent variables in webpack