React - react.render上的未处理错误事件（）

Question

I've seem to got a problem compiling my JSX files to JS when I run gulp.

Gulp Dependencies:

var gulp        = require('gulp');
var browserify  = require('browserify');
var babelify    = require('babelify');
var source      = require('vinyl-source-stream');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var runSequence = require('run-sequence');

I thought that babelify would compile my JSX for me and I wouldn't have to worry about that.

I've then got my build files:

gulp.task('build', function () {
  return browserify({
    entries: 'app.js',
    extensions: ['.jsx'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('compress', function() {
  return gulp.src('./dist/bundle.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', function(cb) {
  runSequence('build','compress', cb);
});

I seem to be getting the error on my app.js file where I add my first component.

Appreciate the help in advanced.

**** UPDATE ****

This is the error that I get once running gulp:

events.js:85
      throw er; // Unhandled 'error' event
            ^
SyntaxError: /Users/maxlynn/Documents/childcare-army/app.js: Unexpected token (6:4)
  4 | 
  5 | React.render(
> 6 |     <AppRoot />,
    |     ^
  7 |     document.getElementById('app-root')
  8 | );

Answer 1

If you recently installed babelify you need to pass some additional configuration to the transform call since Babel 6.x no longer ships with default presets enabled.

In order to be able to transpile JSX you need to enable the react preset.

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

.transform('babelify', { presets: ['es2015', 'react'] })