This is the error when, through mand-line, I do gulp scripts:

TypeError: Object #< Transform > has no method 'transform'

This is gulpfile.js:

var gulp            = require ('gulp')
    , browserify    = require ('gulp-browserify')
    , source        = require ('vinyl-source-stream')
    , reactify      = require ('reactify');

gulp.task('scripts', function () {
  browserify('./assets/js/main.js')
    .transform(reactify)
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./static/js'));
});

gulp.task('default', ['scripts']);

I really don't know how to fix this. I searched on the internet, but nothing I found came close to my specific error.

This is the error when, through mand-line, I do gulp scripts:

TypeError: Object #< Transform > has no method 'transform'

This is gulpfile.js:

var gulp            = require ('gulp')
    , browserify    = require ('gulp-browserify')
    , source        = require ('vinyl-source-stream')
    , reactify      = require ('reactify');

gulp.task('scripts', function () {
  browserify('./assets/js/main.js')
    .transform(reactify)
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./static/js'));
});

gulp.task('default', ['scripts']);

I really don't know how to fix this. I searched on the internet, but nothing I found came close to my specific error.

• javascript
• gulp
• reactjs
• browserify

2 Answers 2

There is some problems with your task.

First, you have to use gulp.src to get your main.js file. Second, transform is an option of gulp-browserify, not something you want to pipe your stream on, same for bundle.

gulp.task('scripts', function () {
  return gulp.src('./assets/js/main.js')
    .pipe(browserify({
      transform: [reactify]
    }))
    .pipe(gulp.dest('./static/js'));
});

If you want something that is more like your first attempt, you don't need gulp-browserify, but browserify alone, there is a quite good article on how to use ReactJs with Browserify and gulp here.

You use vinyl-source-stream with browserify not with gulp-browserify. You're mixing the two.

var buffer = require('vinyl-buffer');
    ,source = require('vinyl-source-stream')
    ,browserify = require('browserify') //not gulp-browerify
    ,babelify = require('babelify')
    ,uglify = require('gulp-uglify')
    ;

gulp.task('scripts', function(){
  var bundler = browserify('./assets/js/main.js');

  return bundler
    .transform(babelify, {presets: ["es2015", "stage-1", "react"]})
    .bundle({standalone: 'noscope'})
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('./static/js'));
});

from https://github./gulpjs/gulp/issues/369

Edit: using babelify instead of reactify (which was deprecated)