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 updateUpgrading node and npm to the latest versions (that was a huge mistake -- way more problems were introduced)
Set
debug: falsein the gulp tasksRan
npm rebuild node-sassDuplicating 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 hisnode_modulesevery 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.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 男人必须洒脱 的文章《npm i and npm update breaking gulp, browserify bui》','https://www.manongdao.com/article-880672.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}