UglifyJS throws unexpected token: keyword (const) with node_modules
Solution 1
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,
},
}),
Solution 2
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
.
Solution 3
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!
Solution 4
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.
Yanick Rochon
#SOreadytohelp Humans are not efficient. Not because we are not smart, or not able to, but because we do not strive toward the same goals. Because we set ourselves rules to ultimately prevent collaborative efforts. Because we envy power and praise fame. Diversity and collaborative efforts (i.e. not directed) will always bring higher and better results than any set of rules; where everyone can benefit from the work of others, freely. The key here is common sense. Because efforts are wasted, unless they can benefit the collective and not one self. This is not communism nor socialism, as there are rights of property, as credits go where they belong. This is merely simple wisdom.
Updated on August 05, 2022Comments
-
Yanick Rochon almost 2 years
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
tovar
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.
-
ChrisR over 6 years
-
Rafa Viotti over 5 yearsMaybe you should suggest
npm install --save-dev terser-webpack-plugin
. -
ChrisR over 5 yearsThis is an opinion, please elaborate on why it is better.
-
John Lee about 5 yearsI really appreciate this answer because it reminded me about the
terser
lib thatterser-webpack-plugin
uses underneath. Note for others:terser
can be used standalone as cli just asuglify-js
was (i.e. webpack is not a requirement) which was exactly what I needed. -
Karl Pokus about 5 years
UglifyJS does not support es6
. Thank you! I could not find that piece of info anywhere. -
Enrique almost 5 yearsbut we need to use webpack to use this solution?
-
Ser almost 5 years@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
-
Trivikram almost 5 yearsTerser was cherry-picked to webpack@4 in github.com/webpack/webpack/pull/8392
-
Riki137 over 4 yearsuse
gulp-terser
if migrating to webpack is out of your budget. -
jimzcc about 4 yearstested and working with "node : v12.14", "gulp cli v2.2.1", "gulp local v4.0.2".
-
BjornW about 3 yearsuglifyjs.terser Ubuntu package worked for me.