choking on jsx syntax

I’ve just updated babelify in order to get rid of reactify and hopefully fix the messed up sourcemaps I’ve been having. However, I was getting some trouble along the lines of

Unexpected token (13:1) while parsing file: ./client/scripts/index.jsx

I’ve installed the latest version of babelify (7.0.2), which includes babel-core 6.0.12.

My gulpfile:

'use strict';

const browserify = require('browserify');
const buffer     = require('vinyl-buffer');
const gulp       = require('gulp');
const gutil      = require('gulp-util');
const source     = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const watchify   = require('watchify');

gulp.task('scripts', () => {
    let bundler = browserify({
        debug: true,
        entries: './client/scripts/index.jsx',
        transform: [
            require('babelify')
        ]
    });

    bundler.on('log', (msg) => {
        gutil.log(gutil.colors.cyan('scripts') + ': ' + msg);
    });

    const bundle = () => {
        return bundler.bundle()
            .on('error', (err) => {
                console.error(err.message);
            })
            .pipe(source('app.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(gutil.env.production ? require('gulp-uglify')() : gutil.noop())
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./public/js'));
    };

    if (!gutil.env.production) {
        bundler = watchify(bundler);
        bundler.on('update', bundle);
    }

    return bundle();
});

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

And the ./client/scripts/index.jsx it’s choking on:

'use strict';

import { createStore } from 'redux';
import { Provider}     from 'react-redux';
import React           from 'react';
import ReactDOM        from 'react-dom';
import reducers        from './reducers';
import routes          from './routes.jsx';

const store = createStore(reducers);

ReactDOM.render((
    <Provider store={store}>{routes}</Provider>
), document.querySelector('[data-app]'));

Anything obvious I’m missing, or some config I should be using?

Cheers.

[wphampton]

Under the section titled Plugin Presets from http://babeljs.io/blog/2015/10/29/6.0.0

You probably want npm install --save-dev babel-preset-react

Then use it as part of your Babelify options https://github.com/babel/babelify#options

[yannbertrand]

Summary:

Basically you just have to npm install the babel-preset-react preset and add 'react' to the babel presets:

babel({ presets: ['es2015', 'react'] })