[WSL2×Laravel9Sail×React×Vite]HotReloadが効かない更新されない

結論

「Cannot get hot reload to work with Laravel Sail, Vite and Vue 3」

こちらに答えがありました。要約すると、`vite.config.js` に以下を記入しておく必要があるとのことです。

server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    },

`Polling` という言葉の通り、一定間隔で変更を確認して内部的にビルドをしているのかな？とイメージしています。

実際に試してみたところ、確かにTypeScriptファイルを変更したタイミングで、ターミナルに変更したファイルのファイル名は表示されるようになりました。

が、実際にブラウザに反映されるまでには時間がかかりました。私の環境で簡単に計測したところ、だいたい30～40秒はかかりました。(ブラウザの更新を押さずに反映されるのはスゴイ)

↑のリンクのディスカッションにも投稿があるようにWindowsPCでの開発の限界なのかなと思いつつ辛抱することにしました。Viteの恩恵にあずかりたいと思っていたのですが、それはまた後日MacBookで試してみた際にでも確認したいと思います。

開発PC OS	Windows10(WSL2 Ubuntu) + Docker
フレームワーク	Laravel9 Sail
フロント	ReactJS(TypeScript) + Vite でビルド

Laravel9からViteでのビルドが初期状態となったようで、私も早速使ってみたいと思いテストアプリを作っていました。

bladeファイルを変更、保存してブラウザを更新すれば変更内容は反映されました。

ただしTypeScriptファイルを修正しても再度`sail npm run dev` を実施しないと反映されず、これではViteの意味が無いじゃないかと困っていました。

ちなみにTypeScriptファイルは`resources/ts/app.tsx` のように配置しています。

以下に解決策がありました。

「Cannot get hot reload to work with Laravel Sail, Vite and Vue 3」

以上です。

変更の反映に30～40秒かかる、と書きましたがやはりそれがどうしても解決せず。。

あまりにも非効率過ぎるので結局Reactでのフロントエンド開発と、LaravelでのAPI開発はリポジトリごと分けることにしました。解決策を提示できずすみません。

React単体で開発した方が圧倒的にスピードが速いと感じています。

以上です。