6

This is my gulpfile code:

gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(reactify)
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

Only the first transform statement runs, and therefor throws an error due to the lack of additional transform (I'm writing in ES6 and JSX w/ react).

I'm at a complete loss and would really appreciate help.

MNZT
  • 157
  • 1
  • 10

1 Answers1

11

Reactify should no longer be used. You don't say what version you are on, but as of Babel 6 "preset's" are the standard way to achieve compilation.

Run the following

npm install save-dev babel-preset-react babel-preset-es2015

You should also make sure Babelify is up to date. Then your Gulp config becomes

var babelify = require("babelify");
gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

See the options page for more information.

Kyeotic
  • 19,697
  • 10
  • 71
  • 128
  • When you say reactify should no longer be used, are you talking broadly or about this particular scenario? – backdesk Mar 15 '16 at 16:46
  • 1
    Babel does everything reactify does and more, and it is just as easy to setup with gulp/grunt or on its own. The OP is *already using babel*, so there is no point in also using reactify – Kyeotic Mar 15 '16 at 18:05
  • 1
    Thanks. Got here after googling around for some solid reasons to justify one over the other above personal preference. – backdesk Mar 16 '16 at 09:34