choking on jsx syntax

[chiel]

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.

[chiel]

Update, I've distilled this error to its smallest possible form and cut out gulp entirely:

package.json:

{
  "name": "react-app",
  "scripts": {
    "build": "browserify ./index.jsx -t babelify -o public/app.js"
  },
  "dependencies": {
    "react": "^0.14.1",
    "react-dom": "^0.14.1"
  },
  "devDependencies": {
    "babelify": "^7.0.2",
    "browserify": "^12.0.1"
  }
}

index.js

'use strict';

import React    from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render((
    <div>Hello world</div>
), document.querySelector('[data-app]'));

Putting these in a directory together, running npm install and then npm run build will give an error like:

$ npm run build

> react-app@0.1.0 build /Users/chiel/dev/react-app
> browserify ./index.jsx -t babelify -o public/app.js

SyntaxError: /Users/chiel/dev/react-app/index.jsx: Unexpected token (8:1)
   6 |
   7 | ReactDOM.render((
>  8 |  <div>Hello world</div>
     |  ^
   9 | ), document.querySelector('[data-app]'));
  10 |
    at Parser.pp.raise (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:486:12)
    at Parser.pp.parseExprSubscripts (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:244:19)
    at Parser.pp.parseMaybeUnary (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:225:19)
    at Parser.pp.parseExprOps (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:171:19)
    at Parser.pp.parseMaybeConditional (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:153:19)
    at Parser.pp.parseMaybeAssign (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:541:26)
    at Parser.pp.parseExprAtom (/Users/chiel/dev/react-app/node_modules/babylon/lib/parser/expression.js:443:19)

npm ERR! Darwin 14.1.1
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.2.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! react-app@0.1.0 build: `browserify ./index.jsx -t babelify -o public/app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-app@0.1.0 build script 'browserify ./index.jsx -t babelify -o public/app.js'.
npm ERR! This is most likely a problem with the react-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     browserify ./index.jsx -t babelify -o public/app.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-app
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/chiel/dev/react-app/npm-debug.log

Hope this helps.

[chiel]

Okay did another bit of testing:

package.json

{
  "name": "react-app",
  "version": "0.1.0",
  "scripts": {
    "build": "browserify ./index.jsx -t babelify -o public/app.js"
  },
  "dependencies": {
    "react": "^0.14.1",
    "react-dom": "^0.14.1"
  },
  "devDependencies": {
    "babelify": "^6.4.0",
    "browserify": "^12.0.1"
  }
}

index.jsx

'use strict';

import React    from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render((
    <div>Hello world</div>
), document.querySelector('[data-app]'));

Changed: babelify downgraded to 6.4.0, it all works now.

[jmm]

See my most recent comment in #103.

[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

[chiel]

I feel so damn stupid for not having seen that blog post. Thanks guys!

[akisma]

blog post link is dead.

[wphampton]

@akisma I fixed the URL up above as well, it shouldn't have had a trailing slash in the URL: http://babeljs.io/blog/2015/10/29/6.0.0

[landed1]

@wphampton thank you very much I am using gulp-babel for my build and was getting the same error.
It isn't obvious to a noob so thanks for contributing.

[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'] })