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?

hey, could you explain me the difference between `webpack -p` and using the `UglifyJsPlugin` plugin? — Matthew, Aug 06 '16 at 17:58

duncanhall · Accepted Answer · 2015-07-14T08:45:36.580

68

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

edited Jul 14 '15 at 08:45

answered May 19 '15 at 14:06

duncanhall

9,206
4
43
74

5

I'm up-voting the answer but it would be nicer if we could see this as part of the webpack JSON config file that you're using. I wasn't sure where to place this in the my own config file to get it working. – Jul 13 '15 at 20:49
5

Thanks, I've added an example of including the plugin in a config file. – duncanhall Jul 14 '15 at 08:46
For me it says webpack is not defined. If I define it as `var webpack = require('webpack');` in webpack configuration then it says "Cannot find module 'webpack'". Do I need to install something? – Amit Kumar Gupta Dec 28 '15 at 09:32
This is a separate issue - try creating a new post for your question. – duncanhall Dec 29 '15 at 09:45
3

I have the same problem, but turning off mangling somehow doesn't help – Vladislav Rastrusny Feb 02 '16 at 19:04
@AmitGupta If you installed webpack using `-g` and are running webpack via the command line, then you also must install webpack locally via `npm install --save-dev webpack` in order to require it inside the webpack configuration file. – Max Apr 17 '16 at 05:19
2

I have the same issue.Turning off mangling didn't help me either. How to debug this further? any ideas? – user911 Feb 02 '17 at 20:45
@user911 If this problem/solution does not match your specific experience, please post a separate question. – duncanhall Feb 10 '17 at 15:07
6

Turning off the mangler is defeating the point of the uglifier. This is not a true solution. – AjaxLeung Mar 22 '17 at 18:05
2

as @AjaxLeung said, turning off mangling makes Uglify fairly pointless. Have you tried turning off mangling of just a subset of objects, like exports? See Uglify docs: https://github.com/webpack-contrib/uglifyjs-webpack-plugin#mangling – Design by Adrian Jun 22 '17 at 11:53
2

Uglify does a vast range of things, of which mangling accounts for a small percentage of compression gains. Incrementally disabling mangling for different groups may well help find a specific issue, but it's not true to say that turning off mangling entirely makes Uglify "fairly pointless". – duncanhall Jun 22 '17 at 15:06

score 1 · Answer 2 · answered Sep 13 '17 at 15:26

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

score 0 · Answer 3 · answered Apr 17 '18 at 06:51

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.

Webpack optimize with UglifyJS plugin causes runtime error

3 Answers3