Error when using vueify transformation in gulp

[yugen]

When trying to run vueify as a transformation using gulp-browserify or running a command via gulp-shell I get the error:

17:28:42] Finished 'vueify' after 9.03 ms
/Users/jward3/tutorials/cordova/surveys/node_modules/vueify/index.js:11
    sourceMap: options._flags.debug
                             ^

TypeError: Cannot read property 'debug' of undefined
    at vueify (/Users/jward3/tutorials/cordova/surveys/node_modules/vueify/index.js:12:30)
    at /Users/jward3/tutorials/cordova/surveys/node_modules/browserify/index.js:423:43
    at makeTransform (/Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:209:21)
    at /Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:186:9
    at Deps.getTransforms (/Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:191:7)
    at Deps.readFile (/Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:164:25)
    at /Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:280:14
    at onresolve (/Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:150:14)
    at /Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:145:17
    at /Users/jward3/tutorials/cordova/surveys/node_modules/module-deps/index.js:426:39

I get the same error when I try to run the browserify command via gulp-shell

browserify -t vueify -e www/js/index.js -o www/build/main.js --debug=true

The command works when run directly on the command line.

I'm a noob to node, gulp, and vue/vueify so it's possible (likely?) that I've made some kind of mistake here.

Here's the relevant portion of my gulpfile in case that is useful:

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    shell = require('gulp-shell');

gulp.task('js', function(){
    // attempt to bypass gulp-browserify
    // gulp.src('./www/js/index.js')
    //     .pipe(shell([
    //         'browserify -t vueify -e www/js/index.js -o www/build/main.js --debug=true'
    //     ]));

    gulp.src('components/**/*.vue',{ read: false })
        .pipe(browserify({
            debug: true,
            transform: [ 'vueify'],
        }))
        .pipe(gulp.dest('./dist/components'));
});
...

[nayzawoo]

module.exports = function() {
  var gulp = require('gulp')
  var utils = require('./utils')
  var browserify = require('gulp-browserify')
  var vueify = require('vueify')
  var babelify = require('babelify')

  gulp.task('browserify', function() {
    gulp.src([
        './client/js/backend/main.js'
      ], {base: './client/js'})
      .pipe(browserify({
        transform: [babelify, vueify],
        debug: !utils.isProduction()
      }))
      .pipe(gulp.dest('./public/js'))
    })
}

gulp browserify

[23:39:11] Using gulpfile ~/php-works/laravel-starter/gulpfile.js
[23:39:11] Starting 'browserify'...
[23:39:11] Finished 'browserify' after 14 ms
/home/nay/php-works/laravel-starter/node_modules/vueify/index.js:11
    sourceMap: options._flags.debug
                             ^

TypeError: Cannot read property 'debug' of undefined
    at vueify (/home/nay/php-works/laravel-starter/node_modules/vueify/index.js:11:30)
    at /home/nay/php-works/laravel-starter/node_modules/browserify/index.js:423:43
    at makeTransform (/home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:209:21)
    at /home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:186:9
    at Deps.getTransforms (/home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:191:7)
    at Deps.readFile (/home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:164:25)
    at /home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:280:14
    at onresolve (/home/nay/php-works/laravel-starter/node_modules/module-deps/index.js:150:14)
    at result (/home/nay/php-works/laravel-starter/node_modules/browserify/index.js:715:13)
    at /home/nay/php-works/laravel-starter/node_modules/browserify/index.js:761:9

[robbash]

Same here.

Workaround without changing the index.js:

...
transform: [babelify, [{_flags: {debug: true}}, vueify]],
...

but preferably getting this fixed. Thanks!

[ryanrca]

+3 for me.
@robbash : your workaround doesn't work in my setup. Relevant code:

 gulp.task('scripts:accepter', function () {

    var accepterBundle = browserify('resources/assets/js/accepter/accepter-app.js')
      .transform("babelify")
      .transform(vueify, {_flags: {debug: true}})
      .bundle()
      .pipe(source('accepter.js'))
      .pipe(buffer())
      .pipe(gulpif(production, uglify()))
      .pipe(gulp.dest('./public/js/curate'));

});   

Halp!

[mackerson]

@robbash Worked for me as well, thanks. I'll be +4.

[ashep]

+1