Posted in Uncategorized

UglifyJsPlugin: ES6 Methods Throw Parse Error

   February 23, 2021  18 Comments on 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”

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

  7. Harmony branch worked for me

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

  8. 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

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

    same problem +1

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

  12. 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.

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

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

  14. 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')
  ]
}

  15. 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"]}

  16. 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.