Viteがファイル変更を検知しない

最近はLaravel + Viteで開発を進めているのですが、先日docker desktopのバージョンアップをしてからsassやjsを変更してもViteのHMRが検知してくれなくなってしまいました。

バージョンアップにより変更したdockerの設定は、Hyper-VではなくWSL2を使用するようにした点でした。調査したところそのWSL2の使用が原因でした。
下記のページに記載してあります。
Vite がファイルの変更を検知しているのに HMR が動作しない

この問題を解消するには vite.config. js に { usePolling: true }  を追加すればよいとのこと。次のように修正しました。

export default defineConfig({
    server: {
　　　（中略）
        watch: {
            usePolling: true,
        },
    },
　　（後略）

この設定にしたところ、以前のようにファイルの変更を検知してくれるようになりました。ただ、この設定はCPU使用率が高くなる欠点があるそうです。Hyper-Vのまま運用した方が無難かもですね。

Tweet