gulp builds incomplete when building new components

Question

Full disclosure: I opened a question very similar to this when eliminating npm and node. You can find that question at: npm i and npm update breaking gulp, browserify builds . Albeit somewhat similar to this question, the root of that question was lower in the build stack and diagnosed a related, but not identical issue. Please do not flag this as a duplicate!

What were you expecting to happen?

gulp to transpile a vue.js component into functional JS

What actually happened?

Running gulp contacts results in an incomplete bundle, that causes the error in Chrome:

SyntaxError: Unexpected end of input

In Firefox:

SyntaxError: missing } after property list[Learn More]             contacts-bundle.js:1443:5
note: { opened at line 1, column 460

This only occurs in a single component (which is new to the project), and only occurs when const Axios = require('axios'); is present.

Commenting or removing that line allows the build to complete successfully. No other components that have this line are affected.

This also occurs when using import Axios from 'Axios';.

The first, major indicator that the file was built incorrectly is the line count of the bundle. A correctly built bundle is typically in excess of 11k LOC, regardless of the pre-transpile LOC count. This particular bundle is around 1,100 LOC.

Here is an example of what triggers the error when the source is viewed in devtools:

module.exports = function parseHeaders(headers) {
  var parsed = {};
  var key;
  var val;
  var i;

  if (!headers) { return parsed; }

  utils.forEach(headers.split('\n'), function parser(line) {
    i = line.indexOf(':');
    key = utils.trim(line.substr(0, i)).toLowerCase();
    val = utils.trim(line.substr(i + 1));

    if (key) {
      parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
    }
  });

  return parsed;
};

},{"./../utils":26}]   <--- this is where the error is triggered

Environment:

Operating System: MacOS High Sierra v.10.13.5

$ node -v
v10.6.0


$ npm -v
6.1.0


$ node -p process.version
v10.6.0


$ node -p process.versions
{ http_parser: '2.8.0',
  node: '10.6.0',
  v8: '6.7.288.46-node.13',
  uv: '1.21.0',
  zlib: '1.2.11',
  ares: '1.14.0',
  modules: '64',
  nghttp2: '1.32.0',
  napi: '3',
  openssl: '1.1.0h',
  icu: '62.1',
  unicode: '11.0',
  cldr: '33.1',
  tz: '2018e' }


$ node -p process.platform
darwin


$ node -p process.arch
x64


$ node -p "require('node-sass').info"
node-sass   4.9.1   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

$ npm ls --depth=0
app@ /Users/user/projects/app
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] (github:wffranco/vue-strap#7becab2b3f6e6b7e281afd777c455e3d83fde927)
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

gulp --v
[15:17:45] CLI version 2.0.1
[15:17:45] Local version 3.9.1

Code and Configurations:

package.json

{
  "name": "project",
  "description": "Some project",
  "author": "Someone <[email protected]>",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e js/vue-projects/src/main.js -o js/vue-projects/dist/build.js",
    "serve": "http-server -o -s -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "buildtest": "cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/test/main.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/test.js",
    "builddev": "cross-env browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js",
    "build": "cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js"
  },
  "dependencies": {
    "ajv": "^5.5.1",
    "axios": "^0.16.2",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "glob": "^7.1.2",
    "gulp-rename": "^1.2.2",
    "moment": "^2.19.4",
    "underscore": "^1.8.3",
    "v-calendar": "^0.5.5",
    "vue": "^2.5.9",
    "vue-bootstrap-datetimepicker": "^4.1.3",
    "vue-pagination-2": "^0.3.2",
    "vue-spinner": "^1.0.3",
    "vue-strap": "github:wffranco/vue-strap",
    "vue-template-compiler": "^2.5.9",
    "vueify": "^9.4.1"
  },
  "devDependencies": {
    "avoriaz": "^3.6.0",
    "babel-core": "^6.26.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-async-to-module-method": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.2.0",
    "browserify": "^14.5.0",
    "browserify-hmr": "^0.3.6",
    "chai": "^4.1.2",
    "cross-env": "^1.0.6",
    "envify": "^3.4.1",
    "eslint": "^4.13.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-html": "^1.5.3",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1",
    "gulp": "^3.9.1",
    "gulp-google-fonts-base64-css": "^1.0.4",
    "gulp-rev": "^8.1.1",
    "gulp-sass": "^3.2.0",
    "gulp-sourcemaps": "^2.6.4",
    "http-server": "^0.9.0",
    "karma": "^1.7.1",
    "karma-browserify": "^5.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.2.0",
    "mocha": "^3.5.3",
    "npm-run-all": "^2.1.2",
    "sinon": "^2.3.8",
    "uglify-js": "^2.8.29",
    "vinyl-source-stream": "^1.1.2",
    "vinyl-transform": "^1.0.0",
    "watchify": "^3.11.0",
    "webdriver-manager": "^12.0.6"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

gulpfile.js

var gulp        = require('gulp');
var browserify  = require('browserify');
var vueify      = require('vueify');
var transform   = require('vinyl-transform');
var source      = require('vinyl-source-stream');
var sass        = require('gulp-sass');
var sourcemaps  = require('gulp-sourcemaps');
var fs          = require("fs")
var babelify    = require('babelify');
var glob        = require('glob');
var rename      = require('gulp-rename');
var rev         = require('gulp-rev');

gulp.task('contacts', function() {
  //determine all files to be compiled
  glob('./js/vue-mini-apps/contacts/**/*.app.js', function(err, files) {
    if (err) {
      gutil.log(gutil.colors.red('Glob error:'),err);
    }
    //browerify each file
    var tasks = files.map(function(entry) {
      return browserify(entry, {debug:true})
          .transform(babelify, {presets: ['es2015'], plugins: ["transform-runtime", "transform-async-to-generator"]})
          .bundle()
          .pipe(source(entry))
          //determine file name from file path
          .pipe(rename('contacts-bundle.js'))
          .pipe(gulp.dest('./js/vue-mini-apps/dist'));
    });
  });
});

Attempted Remedies:

I've tried:

Running:

rm -rf node_modules 
npm cache clean
npm install

npm update

Upgrading node and npm to the latest versions.

Set debug: false in the browserify call

Duplicating known working package.json and package-lock.json both from production systems and from two separate coworkers working on the same project. With the known working package*.json files, I ran rm -rf node_modules, npm cache clear --force, npm install, and received the same results.

Reviewed the Common issues and Their Fixes page as per gulp's documentation

Created a totally separate, bare-bones directory mimicking the structure of the affected project, and the error persists.

Worked with the npm team to eliminate node or npm as a potential source of the issue -- we narrowed it down to being a gulp or gulp plugin issue.

I also consulted the Vue.js support team and they, too, agreed this is an issue with gulp or a gulp plugin.

The oddest part of this issue is it's affecting a single, new component, in the same build task as 30+ other components that also import or require Axios. Any help would be greatly appreciated!

Sources:

Gulp Browserify SourceMaps

gulp, browserify, maps?

Gulp Browserify SourceMaps

node sass release 3.5.3 is breaking build

Gulp-generated source maps don't work in Chrome

Gulp Sass with errLogToConsole: true still stopping my other watch tasks

Getting: SyntaxError: missing ) after argument list but can't find out whats wrong with hulpfile.js

https://github.com/gulpjs/gulp/issues/2065

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes

Answer 1

This issue has been resolved by adding the following to the build task:

  return browserify(entry, {debug:true})
    .require('./node_modules/axios/dist/axios.min.js', {expose: 'axios'})

Immediately after the call to browserify, we add a require() function call. This provides us an alias that is directly linked to the minified plugin file in node_modules. For some reason, this issue crops up in browserify from time to time, and it appears, to us, to be a consequence of trying to maintain the cross platform flexibility browserify offers.

I want to briefly thank Stephen Schneider, who offered assistance in the Axios chat on Gitter, for quickly suggesting this block-eliminating fix.