UglifyJS webpack plugin throws: Unexpected token: name (features)

Question

I used to have problems with UglifyJS for Webpack and ES6 modules:

ERROR in static/js/vendor.6ccd9e38979a78765c7a.js from UglifyJs Unexpected token: name (features) [./node_modules/pica/lib/mathlib.js:19,0][static/js/vendor.6ccd9e38979a78765c7a.js:39003,6]

I read that the new beta version of the Webpack plugin supports ES6:

https://github.com/webpack-contrib/uglifyjs-webpack-plugin

new webpack.optimize.UglifyJsPlugin({
  uglifyOptions: {
    ie8: false,
    ecma: 8, // I also tried 7 and 6
    parse: {},
    mangle: {
      properties: {
        // mangle property options
      }
    },
    output: {
      comments: false,
      beautify: false
    },
    compress: {},
    warnings: true
  }
}),

However, now I get another error:

ERROR in static/js/vendor.6ccd9e38979a78765c7a.js from UglifyJs Unexpected token: name (features) [static/js/vendor.6ccd9e38979a78765c7a.js:39003,6]

What could be the problem?

Darko Tasevski · Accepted Answer · 2017-10-24T11:29:31.690

16

You can try installing babel-preset-env and adding presets": [ "env" ] to your webpack.config.js or babelrc.

Uglify cannot parse ES6 on its own( as far as I know), so you need to transpile your code down to ES5, post-processing your generated JS with babel, or use a different minifier. My recommendation is Babelify to which I switched after having constant errors with Uglify.

Edit: The problem might be in your new webpack.optimize.UglifyJsPlugin declaration, There are problems with using this declaration with Webpack 3+. You need to import the uglifyjs-webpack-plugin and change plugin declaration to new UglifyJSPlugin(example). Here is a reference.

Example:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

    const config = {
      ...
      plugins: [
        new UglifyJSPlugin({ uglifyOptions: { ...options } })
      ]
    }

edited Oct 24 '17 at 11:29

answered Oct 24 '17 at 11:09

Darko Tasevski

396
4
11

I also tried `babel/minify` but as you can see in this issue, there's a problem that's affecting a lot of people: https://github.com/babel/minify/issues/556 – alex Oct 25 '17 at 01:47
There is some plugin that use ES6 and I didn't notice the message above the plugin uglifyjs that not support this so I remove uglifyjs out, will try babel-minify instead. – Osify Nov 14 '18 at 08:59

score 0 · Answer 2 · answered Jan 26 '23 at 09:35

For anyone arriving here stuck for various reasons on webpack3 and webpack.optimize.UglifyJsPlugin:

For us, the answer was to let our webpack babel-loader transpile those node_modules. Instead of sending all node_modules through the babel loader (which isn't recommended for performance reasons), you can exclude all apart from specific packages and package name patterns like this:

exclude: /node_modules\/(?!(react-markdown|mdast-util-.*|micromark-.*)\/).*/

UglifyJS webpack plugin throws: Unexpected token: name (features)

2 Answers2

Linked