⚙️

Vite で HTTPS を有効にしたときにエラーが発生する

に公開

Vite でデバッグしていると、ランダムに net::ERR_HTTP2_PROTOCOL_ERROR が発生し、ページを読み込めないことがあります。確認した発生条件は以下のとおりです。

  • Vite 2.9.14 (3.x 系では発生しない)
  • HTTPS を有効にしている (vite.config.json の server.https)
  • export const されているコードを読み込んだときに発生することがある

解決するには Vite を 3.x にアップグレードするのが確実です。また、エラー自体は HTTP2 に起因するものなので、HTTP2 を無効にすることでも解決できます。HTTP2 を無効化するには、vite.config.ts を次のように設定します。

export default defineConfig({
  ...
  server: {
    https: true,
    proxy: { 'https://localhost:3000': 'https://localhost:3000' }
  }
});

https://github.com/vitejs/vite/issues/4403

Discussion