Why Does Production Build Of React App (with Webpack And Babel) Use Wrong Development Env With Hmr, Which Causes Errors?

I'm trying to create a production build of my React project, but it picks the wrong configuration. In the development version I'm using HMR (Hot Module Replacement). This is conf

Solution 1:

The only thing that worked for me, is that I wrote -

process.env.NODE_ENV = 'production';

at the beginning of my webpack.config.prod.js file.

Solution 2:

It seems that no matter what Babel keeps using the development section of the env value specified in .babelrc. What solved the problem for me, was to use name other than 'development' and set that as the value of BABEL_ENV.

"env":{"dev":{"plugins":[]},"production":{}}

I use separate conf for development. In plugins I have:

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('development'),
    'BABEL_ENV': JSON.stringify('dev')
  }
}),

Solution 3:

& in shell means that it will run in the background, so maybe your variable declaration is not caught by the build stuff that happens at the same time. The good thing is that you can just prepend the command with the variable declarations.

You could simplify the commands like this:

"serve":"NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline","deploy":"NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"

Solution 4:

You can just use the babel-preset-react-hmre.

.babelrc

{"presets":["react","es2015","stage-0"],"plugins":["transform-decorators-legacy"],"env":{"development":{"presets":["react-hmre"]}}}

webpack

    {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: ['transform-decorators-legacy'],
            env: {
              development: {
                presets: ['react-hmre']
              }
            }
        }
    }