発生した問題
Rails に React を組み合わせて利用した時に、erb ファイルを更新した場合はクライアントの表示が変化するが、jsx ファイルを更新しても表示が変化しない。
環境
- OS
- Windows 11
- WSL2
- Ubuntu 20.04 LTS
- 言語
- Ruby 3.2.2
- Node 16.14.0
- ライブラリ
- Rails 7.0.4.3
- jsbundling-rails 1.1.1
- esbuild 0.14.22
備考
- Rails 7 なので
rails sではなくbin/devコマンドでサーバを起動。 - 過去に
rails assets:precompileを実行済み。
原因
rails assets:precompile 実行後に作成されるプリコンパイル済みのアセットが存在する場合、表示においてそちらが優先される。これはプリコンパイル前のアセット（CSSやJavascript）が更新されてもそれらは無視されることを意味する。
以下はアセットパイプライン - Rails ガイドからの引用。
プリコンパイル済みのアセットが配信可能な状態になっていると、元の（コンパイルされていない）アセットと一致していなくてもプリコンパイル済みのアセットが配信されてしまいます。これはdevelopmentサーバーでも同じことが起きます。
developmentサーバーが常にアセット変更のたびにオンザフライでコンパイルし、常に最新のコードが反映されるようにするには、development環境ではproductionと異なるディレクトリにプリコンパイル済みアセットを保存する設定が必要です。そうしないと、production用のプリコンパイル済みアセットがdevelopment環境でのブラウザ表示に影響を与えてしまいます（つまりアセットを変更してもブラウザに反映されなくなります）。
解決策
概要
rails assets:precompile で生成されたコンパイル済みのassetsを削除すればよい。
方法1
以下のコマンドを実行。
rails assets:clobber
方法2
以下のコマンドを実行した後にpublic/assets ディレクトリを丸ごと削除する。
rails assets:clean
補足
方法2で利用する以下のコマンドだけでは解決しなかった。
rails assets:clean
コマンドを実行すると以下のように表示されコンパイル済みアセットが削除される表示が出る。
$ rails assets:clean
I, [2023-05-24T16:38:31.501191 #1129] INFO -- : Removed application-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.js
I, [2023-05-24T16:38:31.501828 #1129] INFO -- : Removed application.js-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.map
しかし、public/assets ディレクトりが残っている限り依然更新は反映されなかった。
公式ドキュメントには「古いコンパイル済みのアセットを削除」とあるので、現在利用しているコンパイル済みアセットは残るものと推定される。
参考文献
- rails assets:clobber | Railsドキュメント
- rails assets:clean | Railsドキュメント
- assets:precompile で生成されたファイルを削除
- アセットパイプライン - Railsガイド
本記事の元になった Chat-GPT とのやり取り
質問
Railsのローカルで
rails assets:precompileを実行してしまうと、precomile済みアセットが配置され、以後development環境でもprecompile済みアセットの表示が優先されることで更新が反映されなくなるようです。上記を実行してしまった際に配置されたprecompile済みアセットはどのように削除できますか？
回答
Railsのprecompile済みアセットを削除するには、以下の手順を実行します。
precompile済みアセットの削除:
public/assetsディレクトリ内にあるprecompile済みアセットを削除します。ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。rm -rf public/assetsこのコマンドは
public/assetsディレクトリを再帰的に削除します。マニフェストファイルのリセット: precompile済みアセットの情報を保持しているマニフェストファイル（
public/assets/manifest.json）も更新する必要があります。マニフェストファイルを削除するか、中身を空にします。ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。rm public/assets/manifest.jsonまたは
echo '{}' > public/assets/manifest.json2つ目のコマンドは、空のマニフェストファイルを作成します。
これでprecompile済みアセットと関連する情報が削除され、以降の開発環境では更新が反映されるようになります。
補足
試した事例では2つ目の回答に対応する処理は行わずとも解決した。
また、rails assets:clobber の事は教えてもらえなかったのであまり知名度がないのかもしれない。コマンド名で検索してもほとんど記事がヒットしない。