Gulp Task Failing - Browserify/Babel Incompatibility? - node.js

Question

I've inherited a rather unusual website that is a hybrid of C# and Node JS (using TypeScript). We have a continuous integration environment set up on Azure DevOps to build the website and deploy it to a test environment. We've not had to build the website since March, and now the build process has suddenly broken. We had to change the reference to 'gulp' in package.json from "github:gulpjs/gulp#4.0" (which no longer exists) to "github:gulpjs/gulp#71c094a51c7972d26f557899ddecab0210ef3776", but now the step of the build process that calls gulp ("node node_modules\gulp\bin\gulp.js package") is failing with the following error (this is from the DevOps build log):
2018-12-04T22:38:48.9501268Z [22:38:48] TypeError in plugin "gulp-babel"
2018-12-04T22:38:48.9501465Z Message:
2018-12-04T22:38:48.9501806Z Path must be a string. Received undefined
If I run "node node_modules\gulp\bin\gulp.js package" locally I get the following:
[11:54:45] Error: TypeScript error: node_modules/#angular/router/src/router_module.d.ts(140,41): Error TS1110: Type expected.
at formatError (C:\.....\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:20:10)
at Gulp.<anonymous> (C:\.....\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:31:15)
at emitOne (events.js:120:20)
at Gulp.emit (events.js:210:7)
at Object.error (C:\.....\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
at handler (C:\.....\node_modules\now-and-later\lib\mapSeries.js:43:14)
at f (C:\.....\node_modules\once\once.js:25:25)
at f (C:\.....\node_modules\once\once.js:25:25)
at tryCatch (C:\.....\node_modules\async-done\index.js:24:15)
at done (C:\.....\node_modules\async-done\index.js:40:12)
This link - https://github.com/babel/gulp-babel/issues/154 - seems to suggest a problem with browserify (or at least an incompatibility between browserify and babel-core)? The only suggestion is to drop the use of browserify. The mystery to me is why this worked previously but is now failing when all we've changed is the reference to gulp.
Could anyone explain to me what is causing the error and how to resolve it? Any help will be greatly appreciated.
The gulp task that is raising the error is this:
gulp.task("bundle", function () {
return browserify({
basedir: '.',
debug: true,
entries: [config.appMain],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('app.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(babel({ presets: ['env'] }))
.pipe(uglify())
.pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
.pipe(gulp.dest(config.jsDest));
});
config.appMain = "App/main.ts"
config.jsDest = "./wwwroot/js"
The relevant 'requires' at the top of gulpfile.js are:
var gulp = require('gulp');
var browserify = require("browserify");
var tsify = require("tsify");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var uglify = require("gulp-uglify");
var config = require('./gulp.config')();
The package.json devDependencies versions are:
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"babel-preset-env": "^1.7.0",
"browserify": "^16.2.3",
"concurrently": "^3.4.0",
"del": "^2.2.2",
"gulp": "github:gulpjs/gulp#71c094a51c7972d26f557899ddecab0210ef3776",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.0.4",
"gulp-concat": "^2.6.1",
"gulp-copy": ">=0.0.2",
"gulp-cssmin": "^0.2.0",
"gulp-htmlmin": "^3.0.0",
"gulp-load-plugins": "^1.3.0",
"gulp-rename": ">=1.2.2",
"gulp-rimraf": ">=0.2.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": ">=4.3.9",
"jasmine-core": "2.4.1",
"merge-stream": "^1.0.1",
"nodemon": "^1.11.0",
"tsify": "^3.0.1",
"tslint": "^3.15.1",
"typescript": "^2.0.0",
"typings": "^1.3.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
I've tried using babelify, so the gulp task becomes:
gulp.task("bundle", function () {
return browserify({
basedir: '.',
debug: true,
entries: [config.appMain],
cache: {},
packageCache: {}
})
.transform(babelify, { presets: ['env'] })
.plugin(tsify)
.bundle()
.pipe(source('app.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
.pipe(gulp.dest(config.jsDest));
});
but I get exactly the same error when I execute "node node_modules\gulp\bin\gulp.js package" locally.
Please let me know if you need any more details or code. Thanks for any help you can give.

Answer 1

A colleague of mine worked this out. The solution is, of course, to use babelify. However, I got the implementation wrong. The usage in the gulp task that works is:
gulp.task("bundle", function () {
return browserify({
transform: [["babelify", { "presets": ["#babel/preset-env"] }]],
basedir: '.',
debug: true,
entries: [config.appMain],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('app.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(babel({ presets: ["#babel/preset-env"] }))
.pipe(uglify())
.pipe(sourcemaps.write('./', { includeContent: false, sourceRoot: '../' }))
.pipe(gulp.dest(config.jsDest));
});
The packages and versions used in package.json devDependencies are:
"browserify": "^16.2.3",
"#babel/core": "^7.2.0",
"#babel/preset-env": "^7.2.0",
"babelify": "^10.0.0",
"gulp-babel": "8.0.0",