Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 configured in .babelrc, under env > development > plugins. When adding an extra node env > production it seems to be ignored. It's still using the development configuration with HMR, which causes an error:

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

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:

package.json

{
  "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
}

.babelrc

{
    "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": []
        }
    }
}

As you can see in package.json > scripts > deploy, I'm even explicitly setting the BABEL_ENV to 'production'.

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

By the way, searching often leads to issue #5 on the React-transform-HMR Github page, which is a long thread without a clear solution.

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

webpack.production.config.js

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'
            }
        ]
    }
};
like image 946
Micros Avatar asked Mar 22 '16 11:03

Micros


People also ask

Does create react app use webpack and Babel?

It's actually the react-scripts package that makes everything work. react-scripts specifies all of our app's development dependencies, like Webpack and Babel. Furthermore, it contains scripts that "glue" all of these dependencies together in a conventional manner. Create React App is just a boilerplate generator.

Is webpack used in production?

Webpack v4+ will minify your code by default in production mode . Note that while the TerserPlugin is a great place to start for minification and being used by default, there are other options out there: ClosureWebpackPlugin.

Why Babel is used in webpack?

Advantages of Using Webpack and Babel with Vanilla JSRemoves unused and unnecessary assets from the code, making it cleaner. Makes the code compatible with all web browsers. Bundles up the assets and minifies the components, making it easier for the browsers to load content. Improves the maintainability.


1 Answers

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.

like image 141
alexunder Avatar answered Oct 10 '22 02:10

alexunder