How to transpile React ES6 classes using Grunt + Browserify + Reactify?

Question

I want to use the new ES6 React classes that was introduced with React v0.13, but I am unable to get it to compile correctly. Say I have the following React component defined in the new class syntax:

(function() {
  'use strict';

  import React from 'react'; 

  class _UserDashboard extends React.Component {
        render() {
            return(
                <div className="user-dashboard">
                    <Books />
                </div>
            );
        }
    }
    export const UserDashboard = React.createClass(_UserDashboard.prototype);

}());

The trouble I run into here is that at compile time using Grunt and Browserify and a Reactify transform, Reactify throws an error when it encounters the import keyword:

ReactifyError: /Users/****/Sites/***/assets/js/components/UserDashboard.jsx: Parse Error: Line 7: Unexpected reserved word while parsing file: /Users/****/Sites/****/assets/js/components/UserDashboard.jsx

The problem here seems to have to do with Reactify's use of react-tools, see here and here. But I'm not sure if it is possible to enable the es6module option within Reactify yet.

I tried these two variations to no avail:

...
transform: [[ 'reactify', {'es6module': true} ]]
...

and

...
transform: [[ 'reactify', {'es6':true, 'es6module':true} ]]
...

Does anyone know how this can be done?

Dan Prince · Accepted Answer · 2016-02-08 16:35:37Z

18

You should be able to do all of this with Babel and babelify (the corresponding Browserify plugin).

Babel itself is an ES6+ to ES5 transpiler, but it comes with first class JSX support:

JSX and React

Babel works perfectly with React, featuring a built-in JSX transformer.

Your Browserify transform would become:

{
  "browserify": {
    "transform": ["babelify"]
  }
}

Edit: As of Babel 6, many components have been moved out into a separate presets packages which you'll need to install and include in the transform command.

For React and JSX, you'll need babel-preset-react.

For ES6, you'll need babel-preset-es2015

Together these can be specified in the transform.

transform: [[babelify, { presets: ["react", "es2015"] }]]

edited Feb 8, 2016 at 16:35

answered Apr 12, 2015 at 16:50

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fraxture Over a year ago

That seemed to work, but now the destructuing assignment, e.g. ...other, is not working.

Dan Prince Over a year ago

That's odd, as Babel definitely supports it. Are you getting a compile time error, or just the wrong generated code?

fraxture Over a year ago

I fixed it, but I had to add the stage 0 option. so "transform: [ ["babelify", {"stage": 0}] ].

fraxture Over a year ago

Dan, I'm not sure if I should mark your answer as an answer because although it is a solution, it's not a solution for reactify...

Dan Prince Over a year ago

That's down to your discretion, it depends on your perspective of the problem. Was the core of problem not being able to get ES6 classes, or was it that Reactify was not working?

Ph0en1x · Accepted Answer · 2015-11-11 02:22:01Z

4

Babelify is a best option for my point of view. Small clarification to @Dan's answer. For the babel v 6.0 you will need to install 2 preset.

ES2015
React

with something similar to npm install --save-dev babel-preset-react and npm install --save-dev babel-preset-es2015 commands and then specify this in babelify settings with: transform: [[babelify, {presets: ["es2015", "react"]}]]

And if in your code you use some newest react features like ...other for example, you also need add stage-0 preset.

edited Nov 11, 2015 at 2:22

answered Nov 11, 2015 at 1:23

Ph0en1x

10.1k8 gold badges56 silver badges97 bronze badges

Collectives™ on Stack Overflow

How to transpile React ES6 classes using Grunt + Browserify + Reactify?

2 Answers 2

JSX and React

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

JSX and React

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related