webpack: UglifyJsPlugin: ES6 Methods Throw Parse Error

Hey guys,

After introducing the UglifyJsPlugin, I seem to be getting a parse error complaining about “erroneous punctuation”.

The parser seems to be complaining about my methods in the following source:

module.exports = function(xxx){
    return {
        hello(){ console.log("world"); }
    };
};

The error I’m getting is as follows:

ERROR in compiled.XXXX.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./~/xxx-test-module/xxx/xxx.js:3,7]

Can you all please add support for ES6 methods?

In the meantime, I will modify this to use the old hello: function(){ syntax, but I’m assuming other developers that will begin using this shortly will be pretty disappointed if they run into issues here.

In the future, I’ll be building quite a bit on top of this as well, and the code I’m writing will have quite a few other team members on board. With the assumption that ES6 class declarations and others, this will become a very big problem in the near future 😢

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 19
  • Comments: 36 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Why don’t you use babel?

To solve the problem I have created the file .babelrc with content:

{
    "presets": [
        ["stage-2"],
        ["es2015",  {"modules": false}]
    ]
}

Harmony branch worked for me

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

@jhnns I can’t seem to hold back the urge to point out that your first response was highly unconstructive, but thank you for the suggestion; I have my reasons. If users are being redirected away from your UglifyJsPlugin, my immediate thought is that maintenance of it is not a priority; then the question becomes, why isn’t it deprecated? I would have wasted my time with another plugin, had I known reaching out for assistance on something would result in me throwing it out and going with a completely different solution. A deprecated flag would have been more appropriate to begin with 😀

Your second response, very helpful. Thank you for it. I look forward to Webpack 2. 😃 👍

I got the same error like this:

ERROR in js/128710abdd2a7dccb8cd.js from UglifyJs
Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js:24,0][js/128710abdd2a7dccb8cd.js:147513,9]

and this configuration worked for me:

before:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test')
  ]
}

after:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
    resolve('node_modules/element-ui/packages')
  ]
}

@sokra Do you know how I can transpile ES6 to ES5 using babel via webpack, then minify using UglifyJs2?

@jhnns OK this was almost a year ago and issue is closed but even back then I’d have taken exception with the conviction that there always needs to be a transpiler. JavaScript and tooling around it shouldn’t be turned into a compile-only environment. ES5 isn’t and shouldn’t be cast in stone for an eternity as a compilation target. There are lots of reasons why it can be useful to have ES2015 output.

@monfera now, in 2016, ES2015 output is a totally reasonable target. It depends on what features you’re expecting

I have got the same error.

the part of my webpack.config.js:

module: {
	rules: [
		{
			test: /\.vue$/,
			loader: 'vue-loader',
		},
		{
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: 'babel-loader',
				options: {	presets: ['es2015'] }
			}
		},
	]
}

When I try to build a bundle, I’m getting an error:

ERROR in fileman.js from UglifyJs
Unexpected token punc «(», expected punc «:» [fileman.js:12945,5]

I have got the same error.

the part of my webpack.config.js:

module: { rules: [ { test: /.vue$/, loader: ‘vue-loader’, }, { test: /.js$/, exclude: /node_modules/, use: { loader: ‘babel-loader’, options: { presets: [‘es2015’] } } }, ] } When I try to build a bundle, I’m getting an error:

ERROR in fileman.js from UglifyJs Unexpected token punc «(», expected punc «:» [fileman.js:12945,5]

Seems the problem is a bug in vue-loader. As workaround you can set the desired options in a .babelrc file instead of webpack.config.js

Create a .babelrc file in your project dir with:

 {"presets": ["es2015"]}

https://github.com/babel/babel-loader

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

@serv how?

I find that I’ve only set .jsx suffix to transfer es5 from es6, then I also got the issue. But finally I add the .js suffix to transfer es 5 from es6 also, then it’s work.

@Swivelgames UglifyJs2 doesn’t support ES6 yet (tracked at https://github.com/mishoo/UglifyJS2/issues/448)

Currently you need to transpile ES6 to ES5 to allow UglifyJs to minimize it (i. e. with babel). Considering the browser support for ES6 features you should do this anyway.

Unexpected token punc «(», expected punc «:» [videos-d1b468e49c4966381d3e.js:7605,9] components/videos-7c32edaec1c6de642431.js from UglifyJs

same problem +1

Had the same problem, In my case I forgot to add an async-await transpiler for babel… “if it doesn’t work, throw more babel plugins at it” 😉

here’s my new config:

{
        test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            plugins: [require('babel-plugin-async-to-promises')]
          }
        }],
        exclude: /node_modules/
      }

.babelrc :

{
  "presets": [
    ["stage-2"],
    ["env",  {
      "targets": {
        "uglify" : true
      }
    }]
  ]
}

Angular 4.0.0-rc.2 TypeScript 2.2.1 Autotrack 2.0.4 Webpack 2.2.1 Using require(‘autotrack’); or import ‘autotrack’; causes the following after compile. ERROR in /scripts/app/main.bundle.js from UglifyJs SyntaxError: Unexpected token operator «=», expected punc «,»

I am not sure if it is related to this issue?

Any direction would be appreciated. Thank you

@m00nk It works for me. thkx