Laravel の Vite を使った開発で net::ERR_EMPTY_RESPONSE のエラーを解決する方法についてまとめました。

発生したエラー

GET http://127.0.0.1:5173/resources/js/Pages/Welcome.tsx net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:5173/@react-refresh net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:5173/resources/js/app.tsx net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:5173/@vite/client net::ERR_EMPTY_RESPONSE

解決方法

vite.config.jsに以下を追記する。

export default defineConfig({
  // 追記
  server: {
    host: true,
    hmr: {
      host: "localhost",
    },
  }, // 追記ここまで
  plugins: [
    laravel({
      input: "resources/js/app.tsx",
      refresh: true,
    }),
    react(),
  ],
})

解決の解説

基本的に Docker で環境構築したことによって、Vite の通信の設定を変更する必要があったという流れみたいです。

解決した理由

server.host: true により、Docker やリモート環境からでもサーバーにアクセス可能になりました。

hmr.host: "localhost" により、HMR がブラウザと正しいホスト名を使って通信できるようになりました。

server.host

デフォルトでは、Vite はローカルホスト (127.0.0.1) でのみサーバーを起動します。

host: true を設定することで、Vite サーバーがネットワーク上の他のデバイスやホストからもアクセス可能になります。

これが必要になるのは、Docker 環境やリモート開発サーバーでホストされている場合などです。

hmr.host: "localhost"

HMR (ホットモジュールリプレースメント) は、開発中にコードの変更をリアルタイムでブラウザに反映する仕組みです。

hmr.host を設定することで、HMR が利用する WebSocket 接続のホスト名を指定しています。

この設定により、ブラウザが正しい URL で HMR サーバーに接続できるようになります。

例えば、ホスト名が不正確な場合、HMR が動作せずエラーが発生することがあります。

以上参考になれば幸いです。