初めてviteを使ってReactでプロジェクトを作成している時に遭遇したこと。
環境と状況
- WSL2(ubuntu)
- viteを使ってReactのプロジェクトを作成した
- viteのプロジェクトは
/mnt/e/(NFTS)にあった - Hot Module Replacement(HMR)がきちんと動作しなかった
結論
プロジェクトをWSLのホームディレクトリ~/以下に移すときちんと変更が検出され、即時反映される
原因
原因としては、WSL2のファイルシステムとWindowsのファイルシステムが違う事です。(WSL2の制約)
詳しくは別の記事でまとめてますので、こちら参照
簡単にまとめると、WSL側で変更を検出できるのはLinuxに最適化されたストレージ(ext4)であり、Windowsに最適化されたストレージ(NFTS)だとWSLは変更の検出をうまくできないということ。
今回/mnt/eにプロジェクトを作っていたため、WSLからこの場所にアクセスは出来てもパフォーマンスを十分に発揮できなかったということ。
できなかったときに色々試したこと
viteの設定(vite.config.js)で以下のようにserver.watchで{usePolling: true}を設定すると良いという記載を見つけてやってみたのですがうまくいかなかったです。
これはvite公式ののサーバーオプションのページにも記載があります。またWSL2での実行もしっかりと書かれていました・・・(リファレンス読むって大事)
export default {
server: {
watch: {
usePolling: true,
},
hmr: true, // デフォルトでtrueです
},
};
Windows Subsystem for Linux (WSL) 2 上での Vite の実行
Vite を WSL2 で実行している際、ファイルシステム監視はファイルが Windows アプリケーション（WSL2 でな>いプロセス）により編集された場合に動作しません。これは WSL2 の制約 によるものです。これは WSL2 バックエンドの Docker で実行している場合でも該当します。
これを修正するためには、次のいずれかを行えます:
推奨: ファイルを編集するのに WSL2 アプリケーションを使用します。
プロジェクトフォルダーを Windows ファイルシステムの外へ移動させることも推奨されます。WSL2 から >Windows ファイルシステムへアクセスするのは遅いです。このオーバーヘッドを取り除くことでパフォーマンスが向上します。
{ usePolling: true } を設定する。
usePolling は CPU 使用率が高くなることに注意してください。
終わりに
リファレンス、大事。
今回はviteでしたが、つい先日LaravelでもこのWSL2の制約にあたり苦労しました(学ばないな・・・)