npm Community Forum (Archive)

The npm community forum has been discontinued.

To discuss usage of npm, visit the GitHub Support Community.

npm i package or npm update breaking gulp, browserify builds

As a preface, I’m not 100% sure this is an issue with node, npm, browserify, babel, or gulp. Considering npm i and npm update break my builds, I’m thinking this is in fact, an issue with either npm or node, and the issue just manifests itself via gulp as that’s what I’m using to run my builds.

What were you expecting to happen?

Gulp to transpile vue.js components into functional JS.

What actually happened?

When I run gulp contacts (shown under the Code and Configuration section below), the transpiling runs fine. No errors are outputted in the terminal, and everything appears to complete successfully. The problem is, when the page is reloaded I have an error in the console stating Uncaught SyntaxError: Unexpected end of input. When looking at the source, devtools shows something along these lines:

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}]

There is normally a source map at the tail end of this file but in this case there is none, so there’s a dangling bracket that’s still open or something in the transpiled file. Given the nature of transpiling, it’s unfeasible to try to find the syntax error.

Environment:

Operating System: MacOS High Sierra v.10.13.5

$ node -v
v9.5.0

$ npm -v
5.6.0


   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.6.0 → 6.1.0    │
   │       Run npm i npm to update       │
   │                                     │
   ╰─────────────────────────────────────╯

$ node -p process.version
v9.5.0

$ node -p process.versions
{ http_parser: '2.7.0',
  node: '9.5.0',
  v8: '6.2.414.46-node.18',
  uv: '1.19.1',
  zlib: '1.2.11',
  ares: '1.13.0',
  modules: '59',
  nghttp2: '1.29.0',
  napi: '2',
  openssl: '1.0.2n',
  icu: '60.1',
  unicode: '10.0',
  cldr: '32.0',
  tz: '2017c' }

$ 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 node-sass
└─┬ gulp-sass@3.2.1
  └── node-sass@4.9.1 

Code and Configurations:

package.json

{
  "name": "project",
  "description": "Some project",
  "author": "Someone <noone@email.com>",
  "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:

    rm -rf node_modules 
    npm cache clean
    npm install

Similar questions on StackOverflow and other sources:


So just to clarify:

Does this break after the first npm i or is the update here necessary?

If so, one thing you can do is commit your node_modules when things are still working, then run the update. And see what the diff looks like.

Frankly, I think @cjoulain is correct in their assessment that I’m not sure why this would be an npm issue unless a very serious extraction bug is happening (which I guess is a possibility). This is especially true if this is happening from a working install.

I’m interested to hear what the problem with npm@6 is, preferably npm@next, since there’s been a ton of fixes since 5.6 and I’d like to rule them out. You don’t have to install it to try it: $ npx npm@next install and company will use that version of npm without affecting your current system version so you can do one-shot tests. If you do try that, please make sure that you run -all- npm commands while testing with the npx command, to rule out changes between versions.

I hope this helps you narrow things down!