webpack - Unexpected token: operator (>) from UglifyJs

Question

I have 2 Vue-Cli webpack projects (ClientApp and Lib). Lib is my components library (shared with other projects)

Problem

When I build my project ClientApp npm run build, I have the following error:

ERROR in static/js/app.d08a24ce0e8d0438ce68.js from UglifyJs
Unexpected token: operator (>) [C:/.../Lib/src/tools/escape-key.js:3,0][static/js/app.d08a24ce0e8d0438ce68.js:17468,38]

Questions

It seems like the error comes from an arrow function in the file escape-key.js. This is ES6 syntax and UglifyJS can't parse this. Shouldn't Babel go first, before Uglify? Note that is works well with *.vue files.

Project structure

ClientApp
   | - build
   | - config
   | - src
       | - App.Vue // import EscapeKey from '~lib/tools/escape-key';



Lib
  | -src
     | - tools
         | - escape-key.js

ClientApp's webpack.base.conf.js file

Note there is an alias to Lib.

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '~lib': path.join(__dirname, '../../lib/src'),
    }
  },

Please feel free to ask for more details if required.

Answer 1

Add

"uglifyjs-webpack-plugin": "v1.0.0-beta.1",

to your dev dependencies and update your webpack.config.js file to use this version explicitly:

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

module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
}

uglifyjs-webpack-plugin latest stable release (v0.4.6) uses older version of uglify-js instead of uglify-es that is capable of transpiling ES6. This dependency was updated in 1.0.0-beta.1 release.

https://github.com/webpack-contrib/uglifyjs-webpack-plugin/releases/tag/v1.0.0-beta.1