UglifyJS throws unexpected token: keyword (const) with node_modules

Question

A small project I started make use a node module (installed via npm) that declares const variables. Running and testing this project is well, but browserify fails when UglifyJS is executed.

Unexpected token: keyword (const)

Here is a generic Gulp file that I have successfully been using for a few other past projects without this issue (i.e. without that particular node module).

gulpfile.js

'use strict';

const browserify = require('browserify');
const gulp = require('gulp');
const source = require('vinyl-source-stream');
const derequire = require('gulp-derequire');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const path = require('path');
const pkg = require('./package');
const upperCamelCase = require('uppercamelcase');

const SRC_PATH = path.dirname(pkg.main);
const DIST_PATH = path.dirname(pkg.browser);

const INPUT_FILE = path.basename(pkg.main);
const OUTPUT_FILE = path.basename(pkg.browser);

const MODULE_NAME = upperCamelCase(pkg.name);


gulp.task('default', () => {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: INPUT_FILE,
    basedir: SRC_PATH,
    transform: ['babelify'],
    standalone: MODULE_NAME,
    debug: true
  });

  return b.bundle()
    .pipe(source(OUTPUT_FILE))
    .pipe(buffer())
    .pipe(derequire())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(DIST_PATH))
  ;
});

I have tried fixing this by replace all const to var in that npm-installed module, and everything is fine. So I do not understand the failure.

What's wrong with const? Unless someone uses IE10, all major browsers support this syntax.

Is there a way to fix this without requiring a change to that node module?

Update

I have temporarily (or permanently) replaced UglifyJS with Butternut and seem to work.

Isn't it a problem with the node version? Don't you need like node 8+ to have `const` available? (not sure when it was actually introduced) — laurent, Nov 22 '17 at 16:03
I have been using `const` since v4. And I am currently using 8.9.1 LTS. — Yanick Rochon, Nov 22 '17 at 16:05
Ok that's strange then. What's the error message you are seeing? — laurent, Nov 22 '17 at 16:06
@this.lau_ the same error message as in the title, but I added it in the question as well for clarity. — Yanick Rochon, Nov 22 '17 at 16:10
It doesn't necessarily have to be about the 'const'. It could be one of the modules that you're requiring. — James, Nov 22 '17 at 16:15
@Adrián I thought that as well, but I manually edited the file under `node_modules` and replaced all `const` to `var` and UglifyJS didn't complain whatsoever. Then I *added* a `const T = 'foo';` and UglifyJS complained again. — Yanick Rochon, Nov 22 '17 at 16:17
Maybe you need some other helper module, I remember this same thing happened to me on a new project. I'm not sure how I fixed it but I have this modules as well: --------------------------------------------- "grunt-contrib-concat": "1.0.1", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-jshint": "1.1.0", "grunt-contrib-less": "1.4.0", "grunt-contrib-uglify": "2.0.0", "grunt-contrib-watch": "1.0.0", — James, Nov 22 '17 at 16:27
What I mean is you could try to uninstall that UglifyJS version and install the one I installed (if not the same). It should tell you about dependencies if any required. — James, Nov 22 '17 at 16:30

Ser · Accepted Answer · 2020-01-21T14:37:32.553

94

As ChrisR mentionned, UglifyJS does not support ES6 at all.

You need to use terser-webpack-plugin for ES6 (webpack@5 will use this plugin for uglification)

npm install terser-webpack-plugin --save-dev

Then define in your plugins array

const TerserPlugin = require('terser-webpack-plugin')

  new TerserPlugin({
    parallel: true,
    terserOptions: {
      ecma: 6,
    },
  }),

Source

edited Jan 21 '20 at 14:37

answered Nov 16 '18 at 10:32

Ser

2,250
16
27

1

Maybe you should suggest `npm install --save-dev terser-webpack-plugin`. – Rafa Nov 19 '18 at 16:48
2

I really appreciate this answer because it reminded me about the `terser` lib that `terser-webpack-plugin` uses underneath. Note for others: `terser` can be used standalone as cli just as `uglify-js` was (i.e. webpack is not a requirement) which was exactly what I needed. – John Lee Jun 14 '19 at 20:50
1

but we need to use webpack to use this solution? – Enrique Jul 26 '19 at 19:57
@enrique depends what you want to do, to build an website that matches real business needs you should definitely give a try to webpack. We had that issue on the webpack community so my answer is well rated but technically you don't need webpack to build ES6 code – Ser Jul 27 '19 at 20:24
Terser was cherry-picked to webpack@4 in https://github.com/webpack/webpack/pull/8392 – Trivikram Sep 12 '19 at 03:37

ChrisR · Answer 2 · 2018-11-19T10:20:27.387

40

UglifyJS does not support es6. const is an es6 declaration, so it throws an error.

What is weird is that the package you use does not transpile its files to es5 to be used anywhere.

If you want to still use UglifyJS (to re-use the configuration for example) use the ES6+ compatible version, uglify-es. (Warning: uglify-es is now abandoned.)

And as Ser mentionned, you should now use terser-webpack-plugin.

edited Nov 19 '18 at 10:20

answered Nov 22 '17 at 17:05

ChrisR

3,504
1
13
22

3

You can also replace `gulp-uglify`by `gulp-uglify-es`: https://www.npmjs.com/package/gulp-uglify-es – ChrisR Nov 22 '17 at 17:08
3

`UglifyJS does not support es6 `. Thank you! I could not find that piece of info anywhere. – Karl Pokus Jun 15 '19 at 18:24
use `gulp-terser` if migrating to webpack is out of your budget. – Riki137 Nov 07 '19 at 09:13

Christiyan · Answer 3 · 2020-06-14T15:41:07.330

7

I had the same issue and the gulp plugin gulp-uglify-es resolved the problem.

I think it's the simpliest decision.

Just install:

npm i gulp-uglify-es --save-dev

after that in your code change only this line

const uglify = require('gulp-uglify');

to this:

const uglify = require('gulp-uglify-es').default;

N.B. property .default is crucial otherwise you'll have an error that uglify is not a function.

As mentioned above and as being part of ES6 const operator can only be processed by more modern es6 gulp plugin "gulp-uglify-es"

The rest of your code no need to be changed.

Best regards!

edited Jun 14 '20 at 15:41

answered Mar 24 '20 at 12:27

Christiyan

249
4
3

tested and working with "node : v12.14", "gulp cli v2.2.1", "gulp local v4.0.2". – ioojimooi Jun 04 '20 at 10:10

score 2 · Answer 4 · answered Apr 09 '19 at 02:14

2

I just had this issue with a Gulp project I refactored and for some reason I was having trouble with the official Terser Gulp plugin. This one (gulp-terser) worked with no issues.

answered Apr 09 '19 at 02:14

NetOperator Wibby

1,178
5
21
40

score 0 · Answer 5 · answered Jan 14 '19 at 17:37

0

Use uglify-es-webpack-plugin is better

    const UglifyEsPlugin = require('uglify-es-webpack-plugin')



    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }

answered Jan 14 '19 at 17:37

NEO ViSiON

9
1

7

This is an opinion, please elaborate on why it is better. – ChrisR Jan 17 '19 at 15:55

score 0 · Answer 6 · edited Mar 13 '19 at 10:28

0

I have replaced UglifyJS with YUI Compressor JS inside the GUI of PHPStorm.. It works now.

edited Mar 13 '19 at 10:28

Nazik

8,393
26
72
115

answered Mar 13 '19 at 10:09

Sjoerd

154
11

score 0 · Answer 7 · answered Sep 18 '19 at 17:25

0

I don't really think that this approach is good, but in my case I needed to do this once and forget about that, so I just went to babel's website , transpile es6 to es5 online and replaced the output!

answered Sep 18 '19 at 17:25

Gh111

877
13
14

UglifyJS throws unexpected token: keyword (const) with node_modules

gulpfile.js

Update

7 Answers7

Linked