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.

Related Articles

npm

Commercial Licenses for NPM Packages

AWS Elastic Beanstalk

Keeping Elastic Beanstalk configs in code

Visual Studio Code

Essential VS Code Libraries for 2020

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