vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

TypeError: file.isNull is not a function #119

Open pouu69 opened 8 years ago

pouu69 commented 8 years ago
gulp.task('bundle:js', function(){
    return browserify(SRC.JS + '/app.js')
        .transform(vueify)
        .bundle()
        .pipe(source("app.js"))
        .on('error', gutil.log)
        .pipe(fs.createWriteStream("bundle.js"));
});

my code but not working

/Users/Home/Sites/laravel/square/node_modules/gulp-vueify/index.js:14
    if (file.isNull()) {
             ^

TypeError: file.isNull is not a function
theavijitsarkar commented 7 years ago

facing the same issue..any solution?

theavijitsarkar commented 7 years ago

gulp.task('vuecomp', function () { return browserify('buildSource/vuecomponents/vueapp.js') .transform(babelify, { presets: ['es2015'], plugins: ["transform-runtime"] }) .transform(vueify) .bundle() .pipe(fs.createWriteStream("www/js/bundle.js"))

});

theavijitsarkar commented 7 years ago

It's pretty weird to see that such a booming platform, doesnt work with gulp

robbiemu commented 7 years ago

also getting this error, same line number.

var browserify  = require('browserify');
var vueify = require('gulp-vueify');
var fs = require('fs')
var mkdirp = require('mkdirp');
//...
gulp.task('public', () => {
    mkdirp.sync(dest+'/public/scripts')
    return browserify('public/scripts/demo.js')
    .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream(dest+'/public/scripts/index.js'))
})

=>

C:\Users\roberto\github\cmst385-accessibility\node_modules\gulp-vueify\index.js:14
    if (file.isNull()) {
             ^
TypeError: file.isNull is not a function
    at DestroyableTransform._transform (C:\Users\roberto\github\cmst385-accessibility\node_modules\gulp-vueify\index.js:14:14)

I do not get this error when running it on just the .vue files like:

  gulp.src('public/scripts/vues/**/*.vue')
    .pipe(vueify())
        .pipe(gulp.dest(dest+'/public/scripts/vues'));

But that leaves me in a lurch to compile the other js files that load .vue files. I had been trying to get this working but eventually gave up and moved on to this much simpler entry point compile.

var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var glob = require('glob');
//...
  var files = glob.sync('public/scripts/**/*.js');
   return browserify({ entries: files })
     .transform(babelify.configure({
       presets: ["es2015"]
     }))
       .bundle()
     .pipe(source('index.js'))
 .pipe(gulp.dest(dest+'/public/scripts'))
robbiemu commented 7 years ago

some details: file.isNull and isStream come from vinyl, like you should be doing it in reverse:

browserify('./main.js')
  .bundle()
  .pipe(vueify())
  .pipe(fs.createWriteStream("bundle.js"))

but bundle will choke on the ES6, and the vue files will choke babel if you try to transform before bundle. long story short:, seems like the library is missing a detection phase that would transform through vinyl-source-stream if needed

robbiemu commented 7 years ago

geez. Just noticed, that is gulp-vueify, not vueify! So sorry!. You should close this as the problem is just a confusion about libraries.