Browserify-rails can't load js-files containing JSX

Question

I have added browserify-rails so that I can get React included in my Rails app. I'm able to import and export modules. E.g. my todos.js executes exported functions from hello_world.js. But loading files including JSX breaks everything.

What am I missing? :-( The entire Rails app is available at Github. Please see the browserify-rails branch.

application.rb

config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"

app/assets/javascripts/todos.js

import Hello from "hello_world";
let hello = new Hello();
console.log( "GREET: " + hello.greet() );

// Everything breaks if I add the section below. 
// Why isn't the JSX code transpiled correct? 
// I do have babel in my package.json.
ReactDOM.render(
    <h1>Hello, world!</h1>h1>,
    document.getElementById('example')
);

app/assets/javascripts/hello_world.js

class Hello {
  greet() {
    return "Hello world!";
 }
}

export default Hello;

package.json

{
  "name": "something",
  "dependencies": {
    "babel-preset-react": "^6.11.1",
    "browserify": "~10.2.4",
    "browserify-incremental": "^3.0.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

Answer 1

You should install babel-presets-es2015 also. Just add it in package.json with the latest version.