Webpack error from UglifyJS when creating production assets

Question

I am using Webpack Encore (similar to Webpack) to create asset files. Everything works well when creating the development files, however when running to command to generate the minified files for production I get an error.

ERROR Failed to compile with 1 errors
app.js from UglifyJS .
Invalid assignment [app.js:131,42]
Unexpected character '`' [app.js:10953,9]

It seems like the issue is caused by two plugins:

jquery-asScrollable and jquery-asScrollbar In fact commenting out the following lines, the process completes successfully

require('jquery-asScrollable');
require('jquery-asScrollbar'); 

My package.json file

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.1",
    "animsition": "^4.0.2",
    "bootstrap": "4.0.0-beta.2",
    "jquery": "^3.2.1",
    "jquery-asScrollable": "^0.4.10",
    "jquery-asScrollbar": "^0.5.7",
    "jquery-mousewheel": "^3.1.13",
    "node-sass": "^4.7.2",
    "popper.js": "^1.12.9",
    "sass-loader": "^6.0.6",
    "webpack-notifier": "^1.5.0"
  }
}

UPDATE:

app.js

require('jquery-asScrollable');
require('jquery-asScrollbar');
require('jquery-mousewheel');

Any ideas of what the problem might be?

Answer 1

The two plugins make use of ES6 syntax - in this case template literals . Uglify is incompatible with large parts of ES6. You need to either copy those plugins to your project code (so they get transpiled by your Babel) or un-exclude their respective node_modules folders in your Babel transpilation process.

See the template literals (and more ES6) being used here (line 90-93):

Another option is to import/require the minified versions of the plugins from their dist folders.

Example:

require('node_modules/jquery-asScrollable/dist/jquery-asScrollable.min.js')