Elixir+Phoenix+reactでjsxで書いたところがUnexpected tokenになった時の対処メモ

react導入して、試しにapp.jsに以下を追加したところ、jsxで書いた部分がUnexpected tokenになったので、対処法をメモっておきます。

app.jsの内容はこんな感じです。

web/static/js/app.js

// 最下部に追加
import React from 'react';
import ReactDOM from 'react-dom';

let HelloWorld = React.createClass({
  render: function() {
    return (
      <h1 className="jumbotron">Hello World!</h1>;
    );
  }
});

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('hello');
);

一応htmlも

web/templates/page/index.html.eex

<div id="hello"></div>

この状態でサーバ起動するとこんな感じで怒られてしまいました。

$ mix phoenix.server
[info] Running Tutorial.Endpoint with Cowboy using http on port 4000
[BABEL] Note: The code generator has deoptimised the styling of "bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "bower_components/react/react.js" as it exceeds the max of "100KB".
22 Jan 01:03:22 - info: compiling...
22 Jan 01:03:23 - error: Compiling of web/static/js/app.js failed. web/static/js/app.js: Unexpected token (28:16)
Setting up watches.  Beware: since -r was given, this may take a while!
Watches established.

どうやらReactDOM.renderの()内でエラーしていて、jsxをそもそもコンパイルしてくれてないっぽい。

必要そうなパッケージは入ってるはず、、、

package.json

"dependencies": {
  "babel-preset-react": "^6.3.13",
  "react": "^0.14.6",
  "react-dom": "^0.14.6"
}

この辺のものは一通り入っているのに動かない、、、

なぜ？
ってなってたんですが、brunch-config.js
のpluginsを以下のようにしたら無事動きました！

brunch-config.js

exports.config = {
  // 省略
  plugins: {
    babel: {
      // presets追加
      presets: ["es2015", "react"],
      ignore: [/web\/static\/vendor/]
    }
  },
}

結果

$ mix phoenix.server
[info] Running Tutorial.Endpoint with Cowboy using http on port 4000
[BABEL] Note: The code generator has deoptimised the styling of "bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
22 Jan 01:07:10 - info: [BABEL] Note: The code generator has deoptimised the styling of "bower_components/react/react.js" as it exceeds the max of "100KB".
22 Jan 01:07:15 - info: compiled 8 files into 2 files, copied 3 in 11.6 sec
Setting up watches.  Beware: since -r was given, this may take a while!
Watches established.