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