Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
<p>I'm trying to create a production build of my React project, but it picks the wrong configuration.  </p>

<p>In the development version I'm using HMR (Hot Module Replacement). This is configured in .babelrc, under <code>env &gt; development &gt; plugins</code>.
When adding an extra node <code>env &gt; production</code> it seems to be ignored. It's still using the development configuration with HMR, which causes an error:</p>

<blockquote>
  <p>Uncaught Error: locals[0] does not appear to be a <code>module</code> object with
  Hot Module replacement API enabled. You should disable
  react-transform-hmr in production by using <code>env</code> section in Babel
  configuration. See the example in README: <a href="https://github.com/gaearon/react-transform-hmr">https://github.com/gaearon/react-transform-hmr</a></p>
</blockquote>

<p>Of course I've checked that information, but everything seems right.
When I removed the HMR plugin from .babelrc's development config, it works, proving it is indeed using the development config instead of production.
Here's my files:</p>

<p><strong>package.json</strong></p>

<pre><code>{
  "name": "myproject",
  "main": "index.js",
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline",
    "deploy": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"
  }
  //dependencies omitted in this example
}
</code></pre>

<p><strong>.babelrc</strong></p>

<pre><code>{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        ["transform-decorators-legacy"]
    ],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-hmr",
                        "imports": ["react"],
                        "locals": ["module"]
                    }]
                }]
            ]
        },
        "production": {
            "plugins": []
        }
    }
}
</code></pre>

<p>As you can see in <code>package.json &gt; scripts &gt; deploy</code>, I'm even explicitly setting the BABEL_ENV to 'production'.  </p>

<p>Why is this happening? How do I make sure the production build ignores the HMR plugins?</p>

<p>By the way, searching often leads to <a href="https://github.com/gaearon/react-transform-hmr/issues/5">issue #5 on the React-transform-HMR Github page</a>, which is a long thread without a clear solution.</p>

<p>Edit 2016.03.30: Adding the Babel part of my webpack config on request.
Edit 2016.04.06: Adding whole webpack file on request.</p>

<p><strong>webpack.production.config.js</strong></p>

<pre><code>require('es6-promise').polyfill();
var path = require('path');

module.exports = {
    entry: './main.jsx',
    context: __dirname + path.sep + 'src',
    output: {
        path: path.resolve(__dirname, './bin'),
        filename: 'index.js'
    },
    devServer: {
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js(x?)$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: [['transform-decorators-legacy']]
                }
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader!sass-loader?sourceMap'
            }
        ]
    }
};
</code></pre>