npm i and npm update breaking gulp, browserify builds

What were you expecting to happen?

Gulp to transpile vue.js components into usable and 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 --depth=0
app@ /Users/user/projects/app
├── ajv@5.5.2
├── avoriaz@3.6.0
├── axios@0.16.2
├── babel-core@6.26.3
├── 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.3.0
├── browserify@14.5.0
├── browserify-hmr@0.3.6
├── c3@0.4.23
├── chai@4.1.2
├── cross-env@1.0.8
├── d3@4.13.0
├── envify@3.4.1
├── eonasdan-bootstrap-datetimepicker@4.17.47
├── eslint@4.19.1
├── eslint-config-airbnb@16.1.0
├── eslint-config-airbnb-base@12.1.0
├── eslint-plugin-html@1.7.0
├── eslint-plugin-import@2.13.0
├── eslint-plugin-jsx-a11y@6.1.0
├── eslint-plugin-react@7.10.0
├── glob@7.1.2
├── gulp@3.9.1
├── gulp-google-fonts-base64-css@1.0.4
├── gulp-rename@1.3.0
├── gulp-rev@8.1.1
├── gulp-sass@3.2.1
├── gulp-sourcemaps@2.6.4
├── http-server@0.9.0
├── karma@1.7.1
├── karma-browserify@5.3.0
├── karma-chai@0.1.0
├── karma-chrome-launcher@2.2.0
├── karma-mocha@1.3.0
├── mocha@3.5.3
├── moment@2.22.2
├── npm-run-all@2.3.0
├── qs@6.5.2
├── sinon@2.4.1
├── uglify-js@2.8.29
├── underscore@1.9.1
├── vinyl-source-stream@1.1.2
├── vinyl-transform@1.0.0
├── vue@2.5.16
├── vue-affix@0.2.4
├── vue-bootstrap-datetimepicker@4.1.4
├── vue-pagination-2@0.3.2
├── vue-spinner@1.0.3
├── vue-strap@2.0.2 (github:wffranco/vue-strap#7becab2b3f6e6b7e281afd777c455e3d83fde927)
├── vue-template-compiler@2.5.16
├── vueify@9.4.1
├── vuejs-datepicker@0.9.29
├── watchify@3.11.0
└── webdriver-manager@12.1.0

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 <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
Duplicating my coworker's node_modules. This is unfeasible 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.
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

I've exhausted the extent of my knowledge, and Google searches are returning sparse results at this point. The feeling of defeat is becoming very real, so any help would be greatly appreciated!

Similar questions on SO and sources:

Gulp Browserify SourceMaps

gulp, browserify, maps?

Gulp Browserify SourceMaps

node sass release 3.5.3 is breaking build << this one seems the closest to my problem

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 << might be remotely related, albeit a somewhat old post

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

UPDATE

npm support got back to me and after some troubleshooting, we've eliminated both node and npm as being the issue. This is most likely due to a gulp plugin or gulp itself, per the npm support's advice.

UPDATE #2

Tracked down the issue to be related to Axios. gulp is not importing the contents of that module properly, and as a result, the JS is not transpiled completely. This question has taken a different route now. I will answer it once a solution has been pinpointed for (a) what's causing this, and (b) how we were able to resolve it.

The process of fixing this went as follows:

Uninstall node and npm
- If using Homebrew, simply do brew uninstall node
Delete /usr/local/lib/node_modules (make a list of what's in there for future reference)
Reinstall node with brew install node --without-npm. This part is important, as node natively pulls in npm. npm doesn't appreciate Homebrew's all-controlling demeanor, though and I think this, at least partially, contributed to my issues.
The current curl install process being passed around does NOT work on the latest OSX. You'll receive an error, but the installation will still look successful -- at least until you run npm -v and receive npm: Command not found. You need to do this process (thanks to zmilonas @ https://gist.github.com/DanHerbert/9520689):

export NPM_VERSION=6.1.0

export NPM_PREFIX_FROM_RC=$(test -f ~/.npmrc && cat ~/.npmrc | awk -F'=' '{print $NF}')

export NPM_PREFIX=${NPM_PREFIX_FROM_RC:=~/.npm-packages}

curl -O https://registry.npmjs.org/npm/-/npm-${NPM_VERSION}.tgz && \

tar xzf npm-${NPM_VERSION}.tgz && \

cd package && \

node bin/npm-cli.js install -gf --prefix=${NPM_PREFIX} ../npm-${NPM_VERSION}.tgz && \

cd .. && \

rm -rf package npm-${NPM_VERSION}.tgz

Set NODE_PATH to: export $NODE_PATH="/Users/<your-username>/.npm-packages/lib/node_modules"
You can also add the command in step 5 to ~/.bash_profile` as to retain this environment variable upon restart.
Run npm install -g <package> for each package that was previously in /usr/local/lib/node_modules
Remove your old node_modules from your project directory and run npm install. This should take care of any breakages that occurred due to the update.
Run a test build. This should resolve any of the issues you were having, much like they resolved mine. While this hasn't fixed everything, this process is what it took to repair my broken npm/node install and narrow down what and where the actual issue is in my project.

Keep in mind the above is for the latest MacOS, and may not be necessary for Linux or Windows.

来源：https://stackoverflow.com/questions/51161565/npm-i-and-npm-update-breaking-gulp-browserify-builds

标签

javascript

gulp

axios

browserify