WSL + React で HMR（ホットリロード）が動かないときの対処法

WindowsのVSCodeからWSLのプロジェクトに接続して開発しているときに、HMR（Hot Module Replacement）が動かない という問題に遭遇したので、その解決方法をまとめます。

同じように「コードを変更してもブラウザが更新されない！」と困っている方の参考になればと思います。

---

🔍 問題の症状

• npm run dev で開発サーバーを起動するが、HMRが動作しない
• コードを変更しても、ブラウザが自動更新されない（手動リロードしないと反映されない）

🎯 原因

ViteのHMRはWebSocketを使って動作しています。しかし、WSL2とWindowsのネットワーク構造が異なるため、デフォルトの設定ではHMRのWebSocket通信がうまく通らない ことがあります。

特に、プロジェクトを Windows側（C:\Users\your-user\project）に配置し、WSLからnpm run devを実行している場合、この問題が発生しやすいです。

---

✅ 解決方法

create-react-app (CRA)などによるプロジェクトの場合

react-sample/package.jsonにのstartの起動オプションをつけてください

"start": "react-scripts start --host 0.0.0.0",

viteを使用している場合

vite.config.js に以下の設定を追加してください。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: 'localhost', // WSL環境でもWindows側のブラウザから接続可能に
    port: 5173, // デフォルトポート（変更可能）
    strictPort: true, // ポートが使用中ならエラー
    watch: {
      usePolling: true // WSLでのファイル変更検出を安定化
    },
    hmr: {
      protocol: 'ws',
      host: 'localhost',
      clientPort: 5173,
    }
  }
});

これで、WSLとWindows間のWebSocket通信が安定します。