CODEWITHSUNDEEP
javascriptnpmgulpbabeljsuglifyjs2
Yanick Rochon
Yanick Rochon

Reputation: 53626

UglifyJS throws unexpected token: keyword (const) with node_modules

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.

Upvotes: 95

Views: 69852

Answers (8)

xdvr
xdvr

Reputation: 41

Solved an upgrade problem that was returning the same by uninstalling and reinstalling UglifyJS, and ensuring node_modules were aligned.

rm -rf node_modules
npm install uglifyjs-webpack-plugin --save-dev
npm i

(Updated for suggested improvements)

Upvotes: 1

Christiyan
Christiyan

Reputation: 534

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!

Upvotes: 14

Ser
Ser

Reputation: 2890

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

Upvotes: 97

Gh111
Gh111

Reputation: 1452

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!

Upvotes: 1

NetOperator Wibby
NetOperator Wibby

Reputation: 1414

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.

Upvotes: 2

Sjoerd
Sjoerd

Reputation: 180

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

Upvotes: 0

NEO ViSiON
NEO ViSiON

Reputation: 7

Use uglify-es-webpack-plugin is better

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



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

Upvotes: -1

ChrisR
ChrisR

Reputation: 4008

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.

Upvotes: 42

Related Questions