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.

#// 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

npm install uglifyjs-webpack-plugin --save-dev is not enough

The main problem is "uglifyjs-webpack-plugin": "^0.4.6" in webpack's package.json

According to semver, ^0.4.6 := >=0.4.6 <0.5.0. Because of the leading zero, webpack will never use the 1.0.0-beta.2.

So after running npm i -D uglifyjs-webpack-plugin@beta, you need to do one more step which is rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-plugin. Then webpack will pick up the version from node_modules/uglifyjs-webpack-plugin instead of node_modules/webpack/node_modules/uglifyjs-webpack-plugin

Update on 2018-04-18: webpack v4 does not have this issue

Add the babel-preset-es2015 dependency to fix this.

And also add 'es2015' in .babelrc file.

json
{
	"presets": ["es2015"]
}

I am having the same issue, i found a great answers here that helped me to reach the the file that was causing the error.

Go to Rails Console and Paste:

JS_PATH = "app/assets/javascripts/**/*.js";
Dir[JS_PATH].each do |file_name|
  puts "\n#{file_name}"
  puts Uglifier.compile(File.read(file_name))
end

Hope it helps someone!

For me it had nothing to do with Uglify not working correctly, but rather a dependency (in this case empty-promise) that has not been compiled to ES5 yet. As we just imported the raw source file, but babel is only transpiling files outside of node_modules, uglify got confused by the ES6 syntax.

Simply check if any dependency you've recently added might not have a "dist" build.

If you got this error using Grunt (grunt-contrib-uglify) the solution is to install ES6 version of the plugin:

npm install grunt-contrib-uglify-es --save-dev

Add stage-3 to presets in .babelrc file.

{
  "presets": [
    "stage-3"
  ]
}

I had the same problem with you. I was using gulp.js. I solved this problem thanks to js files change ES format. For example before solved is my code:

for (district for response) {
				$('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
				$('#districts').removeAttr('disabled');
			}

after fix code:

for (district in response) {
				$('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
				$('#districts').removeAttr('disabled');
			}

In summary, the problem is due to Ecma-uglify.js.