3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

react-rails でレンダリングされないという話

Last updated at Posted at 2023-01-15

追記:2023/06/11

React のコンポーネントが表示できたりできなかったりしたのは webpacker がおかしかったのが原因ぽい

Rails 7 系からモジュールバンドラとして esbuild がデフォルトで使用されるらしいので全部 webpacker に移行した
&&
node 18 から node 16 にしてbin/webpackのコンパイルがエラー無しで通るように修正したら治った

Rails 7 系以上で react-rails を使用している場合は webpacker への完全移行をやってみてください

これより下がもとの記事になります。(一応残しておく)


react-rails を導入しようとして詰まった

このREADME通りにすすめても hellow world component が表示されない。。。

やったこと

javascript_pack_tag を app/views/layouts/application に記述する

<%= javascript_pack_tag 'application' %> 

結果

表示されるようになった

他にやった & 関係ありそうなこと

node のアップデート

react-rails のインストール手順をやりなおして進めていくと node のバージョンで怒られたので 12 -> 18 に更新した。

これ関係あるかもしれない。もし javascript_pack_tag 指定しても駄目なら node のバージョン見直そう。

他にやったこと & 関係無さそうなこと

turbo をオフにする

詳しい原因はわからないが、悪さしている可能性があるのでやってみた

<body data-turbo="false">

これで全ページの turbo がオフになる。

でも最終的には turbo オンにした状態でも hello world component が表示されたのであんまり関係無さそう

感想

しれっと表示されないみたいな状態なのでとても苦しかった
結局3〜5回目のトライぐらいでやっと表示できた。。。。

3
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?