WSL2でCreate-React-AppのHot Reloadが効かないと感じた際の解決方法

  •  
 
トビウオ2021年4月1日 - 11:51 に投稿

タグ

概要

タイトルの通りです。ググっても検索上位に出ないので、調べるのが地味に大変でした。

解決方法

答えは公式のトラブルシューティングに掲載されていました。

Troubleshooting | Create React App

If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox,
create an .env file in your project directory if it doesn’t exist,
and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start,
the watcher uses the polling mode, as necessary inside a VM.

WSL2は動作の都合上、Linuxカーネルを仮想的に動かしていますので、ちょうど「inside a virtual machine」に符合します。
そのため、環境変数にCHOKIDAR_USEPOLLING=trueを追加する、この解決法がよく効くのです。
なお実際には、説明文にもある通り、「.envファイルを作成してその中に記述する」ことになるでしょう。

ちなみに「CHOKIDAR」の意味についてですが、Node.js向けのファイル変更監視ライブラリ「chokidar」に由来するものと思われます。

注意

React Hot Reload not working」などでググると、「Hot Reload stopped working with React "^17.0.1" #9904」などがヒットします。
そちらでは「.envファイル内にFAST_REFRESH=falseを追加してFast Refreshを無効化する」といった解決法が提示されています。

しかし、これは「ReactにおけるFast Refresh機能の問題についての解決法」であって、「Create React Appが仮想環境でHot Reloadされない問題についての解決法」ではありません。ご注意ください。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。
CAPTCHA
この質問はあなたが人間の訪問者であるかどうかをテストし、自動化されたスパム送信を防ぐためのものです。