Laravel Sailを使い、WSL2上にローカル環境を構築したが、Viteのホットリロードが動作しない

背景、目的

Laravel Sailを使い、WSL2上にローカル環境を構築したが、Viteのホットリロード機能が動作しなかったので、解消方法を調査した。

結論

vite.config.jsにusePolling: trueを追加する。
ViteのドキュメントによるとWSL2上でViteを実行している場合、Windowsアプリケーション (非WSL2プロセス)でファイル編集しても監視が動作しないらしい。usePollingを有効にすることでWindowsアプリケーションで編集した場合でも監視されるようになるとのこと。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        // 以下のパラメータを指定しないとapp.css, app.jsのURLが0.0.0.0になってしまうため、明示的にlocalhostに変更
        hmr: {
            host: 'localhost'
        },
        // Windowsアプリでファイル編集した際に監視されない問題があるため、usePolling:trueにすることで監視を強制させる
        // https://vitejs.dev/config/server-options.html#server-watch
        watch: {
            usePolling: true
        }
    }
});

上記の設定を追加したことで、Bladeファイルを修正した際にホットリロードが動作するようになった。

Link

HMR not working with Laravel Sail in WSL2 · Issue #49 · laravel/vite-plugin
Server Options | Vite