Search code examples
javascriptvariable-assignmentuglifyjsgulp-uglify

UglifyJS2 invalid assignment on [] =

I've started working on a old project which is using gulp-uglify to minify it's JS, but I get the following error when I run the gulp task:

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Invalid assignment
File: app/assets/js/main.js
Line: 92
invalid assignment [] =

Sure enogh when I look at line 92, I see a strange variable assignment which has a syntax I'm unfamiliar with:

[newTitle, newVal] = $('#' + elementId + '-title').text().replace('*', '').split(':');

It later occurs with:

[prodW = 0, prodL = 0, boxL = 0] = currentOption.text().split(/[\/-]/);

If I commnet out these lines I get more errors as newTitle, newVal, prodW, prodL, boxL are all used elsewhere.

Any idea what's going on here is there a way to avoid these errors?

Here is the gulp task I'm running in case it helps...

gulp.task('compressJS', function (cb) { 
    pump([
            gulp.src('app/assets/js/*.js'),
            uglify(),
            gulp.dest('build/js/')
        ],
        cb
    );
});
Solution

  • This is a feature of JavaScript ES6, called Destructuring Assignment.

    The problem is that Uglify2 is not ES6 compatible. You can either try to use the new Uglify3, which is compatible, or transform your ES6 code to ES5 first, with something like gulp-babel: https://www.npmjs.com/package/gulp-babel

    The advantage of doing it with Babel is also that older browsers do not support ES6.