Webpack optimize with UglifyJS plugin causes runtime error

Question

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?

Answer 1

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     })   ] }; 

Answer 2

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%)