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 😢

Author: Fantashit

18 thoughts on “UglifyJsPlugin: ES6 Methods Throw Parse Error

  1. @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. 😃 👍

  2. Harmony branch worked for me

    {
      "devDependencies": {
        "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
      }
    }
  3. 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

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

    same problem +1

  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]
    
  6. 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.

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

    {
        "presets": [
            ["stage-2"],
            ["es2015",  {"modules": false}]
        ]
    }
    
  8. 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')
      ]
    }
  9. 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"]}
    
  10. 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/
          }
    
    

Comments are closed.