create-react-appでホットリロードすると画面が固まる問題と解決方法

Icons made by Freepik from www.flaticon.com

問題の現象

create-react-appで作成したプロジェクトでの開発中に本現象が発生しました。コマンドyarn startを実行後、ソースコードファイルを保存するとアプリの画面が固まり、操作を受け付けなくなってしまいます。 このときUncaught ReferenceError: process is not definedというエラーがコンソールに出力されます。

本来期待される動作としては、ファイル保存時にはその変更がアプリに反映されて引き続き動作するはずです（ホットリロード）。

環境：
react-scripts 4.0.3
node 14.18.1
yarn 1.22.15

原因

react-scriptsが依存しているreact-error-overlayの最新バージョン6.0.10が、react-scripts v4と競合しているようです（参考）。

そのため本現象は、react-error-overlayがアップデートされた2021/12/14以降に発生します。また現時点で最新のcreate-react-appでプロジェクトを作成するとreact-scripts 5.0.0がインストールされるため、本現象は発生しません。

解決方法①

react-scriptsをv5にアップデートすることで解決します。お使いのパッケージマネージャに応じて以下のコマンドを実行してください。

yarn add --exact react-scripts@5.0.0

または

npm install --save --save-exact react-scripts@5.0.0

解決方法②

react-scripts v4を利用し続ける場合はこちら。環境がnode v14以前であったり、破壊的変更を避けたい場合など。

react-error-overlayのバージョンを 依存ツリー内を含め 6.0.9に固定することで解決する方法です。ここでは手順をパッケージマネージャ毎に解説します。（npmの手順は未検証）

手順：yarnの場合

はじめに以下のコマンドを実行します。

yarn add --dev react-error-overlay@6.0.9

package.jsonに以下の記述を追加します。resolutionsフィールドで依存パッケージのバージョンを指定しています。

"resolutions": {
  "react-error-overlay": "6.0.9"
},

最後にnode_modulesフォルダを削除し、コマンドyarnでパッケージを再インストールして無事解決です。

手順：npmの場合

はじめに以下のコマンドを実行します。

npm i --save-dev react-error-overlay@6.0.9

package.jsonに以下の記述を追加します。

"resolutions": {
  "react-error-overlay": "6.0.9"
},

最後に以下のコマンドを実行して解決です。npmにおいてresolutionsによるバージョン指定を固定しています。

npx npm-force-resolutions

参考リンク

v5 Regression react-error-overlay build – Uncaught ReferenceError: process is not defined · Issue #11771 · facebook/create-react-app
https://github.com/facebook/create-react-app/issues/11771

reactjs – process is not defined on hot reload – Stack Overflow
https://stackoverflow.com/questions/70357360/process-is-not-defined-on-hot-reload/70374227