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.
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`)), }
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.
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…
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).
I hope you can get inspired by this solution which works with webpack. (link below)
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With