npm i package or npm update breaking gulp, browserify builds

cli

(Thomas Jost) #1

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:

  • Running:
    rm -rf node_modules 
    npm cache clean
    npm install
  • npm update

  • Upgrading node and npm to the latest versions (that was a huge mistake โ€“ way more problems were introduced)

  • Set debug: false in the gulp tasks

  • Ran npm rebuild node-sass. The reason for this were some early indications that this might be causing the issue. Updating node-sass has had zero impact on the issue.

  • Duplicating my coworkerโ€™s node_modules. This cannot be used as a permanent solution, as I canโ€™t have him install a new plugin and airdrop me an archive of his node_modules every time I need new functionality.

  • Reviewed the Common issues and Their Fixes page as per Gulpโ€™s documentation

  • Iโ€™ve exhausted the extent of my knowledge, and Google searches are returning sparse results at this point. In addition, Iโ€™ve reached out to support@npmjs.com three days ago as well as the Twitter account this morning and was told (by CJ on Twitter, no response from the support email yet) that should this not be a npm-specific issue, this forum would be the best avenue to exhaust for gaining assistance. The feeling of defeat is becoming very real, so any help would be greatly appreciated!

Similar questions on StackOverflow and other sources:


(Kat Marchรกn) #2

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!


(system) #3

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.