dest.write is not a function in gulp with broswerify

Question

I try to build my react project using gulp and browserify. But every time I try to build the bundle I get this error:

[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js
[16:19:54] Starting 'build'...
[16:19:54] 'build' errored after 36 ms
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function
    at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6)
    at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8)
    at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623
    var written = dest.write(chunk);
                       ^

TypeError: dest.write is not a function
    at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9)
    at DestroyableTransform.Readable.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10)
    at DestroyableTransform.Transform.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32)

TypeError: dest.write is not a function. Okay this is strange. I can't find any solution.

package.json (devDependencies only)

devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.3.0",
    "bootstrap-sass": "^3.3.7",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-pug": "^3.0.4",
    "gulp-sass": "^2.3.2",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }

Bellow is my gulpfile require section.

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

And here the task I use for bundle.

gulp.task('build', function() {
  return gulp.src('./react/index.jsx')
    .pipe(browserify({
      extensions: ['.jsx'],
      debug: true,
      cache: {},
      packageCache: {},
      fullPaths: true
    }))
    .pipe(babelify.configure({ presets: ['es2015', 'react', 'stage-0'] }))
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./public/react/'));
});

Is there another way to do the bundle? What is going wrong?

Answer 1

It took me a while (actually all day) to figure it out. The whole configuration was wrong. This is the right one:

gulp.task('build', function() {
  return browserify({
      extensions: ['.jsx', '.js'],
      debug: true,
      cache: {},
      packageCache: {},
      fullPaths: true,
      entries: './react/index.js',
    })
    .transform(babelify.configure({ 
        presets: ['es2015', 'react', 'stage-0'],
        ignore: /(bower_components)|(node_modules)/
    }))
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./public/react'));
});

Src: Using React with ES6 and Browserify by wecodetheweb.com