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 usingenv
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'
}
]
}
};
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With