Babel

Fixing Uglify Errors With Babel


Although I have been using ES6 in my newer projects, today I ran across an error that proved troublesome to resolve (partly as the error thrown was barely useful!).

events.js:163 throw er; // Unhandled 'error' event ^ GulpUglifyError: unable to minify JavaScript at createError (/x/x/x-x/node_modules/gulp-uglify/lib/create-error.js:6:14) at wrapper (/x/x/x-x/node_modules/lodash/_createHybrid.js:87:15) at trycatch (/x/x/x-x/node_modules/gulp-uglify/minifier.js:26:12) at DestroyableTransform.minify [as _transform] (/x/x/x-x/node_modules/gulp-uglify/minifier.js:76:19)

To save everyone else the couple of hours I lost, the issue arose because increasing the modules I load in from npm and bower are using ES6 formatting, and these were causing the error, as uglify() does not support ES6. I mistakenly thought this wouldn't be an issue as I wasn't using any ES6 changes in my code - forgetting the packages!

As is typical - once the problem is identified, the solution is easy.

$ npm install --save-dev gulp-babel babel-preset-es2015

Then to my browserify Gulp task I made this change, from;

return stream.on('error', handleErrors) // .pipe(gulpif(global.isProd, streamify(uglify()))) .pipe(gulp.dest(config.scripts.dest)) //

To this;

return stream.on('error', handleErrors) // .pipe(streamify(babel({ presets: ['es2015'] }))) // added Babel pipe .pipe(gulpif(global.isProd, streamify(uglify()))) .pipe(gulp.dest(config.scripts.dest)) //

I would thoroughly recommend this gets added to build scripts to cover your bases when it comes to third-party packages. On another note, I am now investigating Yarn to help solve some issues with the package control we have.


javascript

A tech native with 20 years of experience across the digital space. Darryl is an evangelist for the power and disruption of blockchain technologies and fosters a passion for bringing ever greater utility and adoption to the masses.

Copyright © 2016-2023 Bonbon Group Ltd. All Rights Reserved.