Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uglify SyntaxError: Unexpected token: punc ())

I am trying to use gulp in order to minify a folder containing JS files. However, one of the files has the above error, preventing it from being minified.

I managed to catch and print the error, which I've partially printed here:

JS_Parse_Error {  message: 'SyntaxError: Unexpected token: punc ())',  filename: 'ex.js',  line: 189,  col: 25,  pos: 6482,  stack: Error\n    at new JS_Parse_Error (eval at <anonymous> ... )   plugin: 'gulp-uglify',  fileName: '.../js/ex.js',  showStack: false } 

The file in question contains the following, shortened:

function() {   ...   $.confirm({     buttons: {         confirm: function() {             $.post('/ajax-handler', {                     ...                 })                 .done( function(response) {                     var data = filterResponse(response);                     if (data['status'] == 'success') {                         sleep(1000).then(() => {                     *       ...                         });                         sleep(5000).then(() => {                             ...                           });                      } else {                         console.log('Oops!');                     }                 })                 .fail( function(err, status, response) {                     ...             });         },         cancel: function() {}     }  });   ... } 

I added the "*" above in order to indicate the exact position listed by JS_Parse_Error.

like image 277
Alexander Avatar asked Feb 21 '17 18:02

Alexander


People also ask

Why is uglify throwing an API_url error?

In my case the API_URL was a global variable. So Uglify wasn't sure if it's defined, that's why it threw an error. // ------------------------------------ // Externals // ------------------------------------ webpackConfig.externals = { config: JSON.stringify (require (`./$ {__DEV__ ? 'development' : 'production'}.json`)), }

Why did uglify-JS throw an error when trying to import an object?

I didn't have to install other uglify-js package versions. The point was to solve imports to objects in proper way. In my case the API_URL was a global variable. So Uglify wasn't sure if it's defined, that's why it threw an error.

How do I fix the UglifyJS-Webpack-plugin error?

The simplest way to get around this error is not to use the latest version of uglifyjs-webpack-plugin, but the version that was release at the time this thread was answered, since they made a major release since. Of course there must be a way to make it work with the latest version, but for lack of a perfect answer, I still share mine…


1 Answers

// Update

From the comments ~ @imolit

 v2.0.0 (2018-09-14) - BREAKING CHANGES (link)

Switch back to uglify-js (uglify-es is abandoned, if you need uglify ES6 code please use terser-webpack-plugin).


Original answer before the update...

I hope you can get inspired by this solution which works with webpack. (link below)

Simply teach UglifyJS ES6

There are two versions of UglifyJS - ES5 and ES6 (Harmony), see on git
ES5 version comes by default with all the plugins, but if you install a Harmony version explicitly, those plugins will use it instead.

package.json

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" 

or

npm install --save uglify-js@github:mishoo/UglifyJS2#harmony  yarn add git://github.com/mishoo/UglifyJS2#harmony --dev 

Webpack

To use it with webpack install also the webpack plugin

npm install uglifyjs-webpack-plugin --save-dev  yarn add uglifyjs-webpack-plugin --dev 

then import the manually installed plugin

var UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 

and replace it in code

-  new webpack.optimize.UglifyJsPlugin({ ... }) +  new UglifyJSPlugin({ ... }) 

For more webpack info (Installation/Usage) see https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install

like image 106
Qwerty Avatar answered Sep 17 '22 18:09

Qwerty