Vite: HMR not working の原因と解決策

ファイル監視問題: WSLやDockerでのファイルシステム
ポート競合: WebSocketポートがブロック
設定ミス: vite.config.jsの設定
キャッシュ問題: ブラウザやViteのキャッシュ

概要

Viteのホットモジュールリプレースメント(HMR)が動作せず、変更がブラウザに反映されない問題です。

ファイルを保存しても画面が更新されない

1
2
3
4
5
6
7
8
9
// vite.config.js
export default {
  server: {
    watch: {
      usePolling: true,
      interval: 100
    }
  }
}

1
2
3
4
5
6
7
8
export default {
  server: {
    hmr: {
      port: 24678,
      clientPort: 24678
    }
  }
}

1
2
3
4
5
6
7
8
export default {
  server: {
    host: true,
    hmr: {
      host: 'localhost'
    }
  }
}

1
2
rm -rf node_modules/.vite
npm run dev