Posted at

react-webpack-rails-tutorialのBasic Demo Setupでコケまくったのでメモ

More than 1 year has passed since last update.

shakacode/react_on_rails は Webpackを使ってRailsでReactを動かすためのGemです。

これを用いたチュートリアル

の README にある Basic Demo Setup をやろうとしたら、エラーがたくさん出たのでその対処法を書いておきます。

開発環境はMacです。


bundle install できない

capybara-webkitのインストールでエラーが出ました。qmakeが使えないことが原因だったので、qtを入れました。

(まぁ7番目の指示でwhich qmakeしてqmake入っているか確認して、と書いてあるのでこれに気づくべきでした)

$ brew install qt@5.5

$ brew link --force qt55

Installing Qt and compiling capybara webkit · thoughtbot/capybara-webkit Wiki


yarn install できない

README の 11 番目にyarnを実行して、とありますが、途中で止まってしまいました。

原因は自分の環境のpythonのバージョンが3系だったことによるnpmのsleepが動かせないことだったため、pythonを2系にしたらyarn installできました。


foreman start -f Procfile.hot できない

まず、指示にあるコマンドは正確にはbundle exec foreman start -f Procfile.hotだと思います。

次に、コマンドが動かない原因ですが、自分の場合node-sassが原因だったので、node-sassをrebuildしました(正直よくわかっていない)。

$ cd client

$ npm rebuild node-sass

これで無事、デモを見ることができました。ちなみに指示の14番目ではOpen a browser tab to http://localhost:3000 for the Rails app example with HOT RELOADINGと書いてありますが、おそらく localhost:5000 の間違いです。

スクリーンショット 2017-04-12 22.16.10.png

いろいろと大変でしたが、とりあえずデモが動かせて良かったです。環境によっては別のところでつまる可能性がありますが、この記事が参考になれば幸いです。