I have an isomorphic React application that is bundled via webpack.
I have 2 entry points corresponding to 2 bundled file outputs: vendors.js and app.js.
When running the webpack-dev-server or when compiling without any optimization flags, everything works fine. However, as soon as I try to use the Uglify plugin, the compiled output contains errors.
I have tried:
webpack -p
webpack -optimize-minimize
or in the config:
new webpack.optimize.UglifyJsPlugin({sourceMap:false})
But all result in the same runtime error (undefined variables).
Is there anything obvious that could be causing this? Is Uglify being over-zealous and removing something it shouldn't?
The problem was being caused by the Uglify mangler. Without knowing which variable rename was causing the problem, the solution was to turn off mangling entirely:
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false
})
This should be added as a Webpack Plugin to your config file, eg:
var config = {
//... various config settings
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false
})
]
};
For those who deactivated mangle and still have the issue, check if you build with -p parameter. It appears -p also mangle the output, and in my case, I had to switch UflifyJsPlugin mangle to false and build without the -p flag to get it to work (at the cost of an increase of the weight of the js of around 50%)
I fixed this by using the following (I'm using Webpack 4.5):
var config = {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
safari10: true,
mangle: {
safari10: true,
}
}
})
]
}
};
From https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options:
safari10 (default false) -- Pass true to work around the Safari 10 loop iterator bug "Cannot declare a let variable twice". See also: the safari10 output option.
Also note that this goes in optimization.minimizer. It didn't work for me when I put it in plugins.