Vite 8 にメジャーアップデートする

[KentaHizume]

2026/5/1

• vite-plugin-inspect および vite-plugin-vue-devtools の対応待ち。
• vite-plugin-vue-devtools をしばらく外すか、vite-plugin-vue-devtools は一応動く + アプリ本体には関係ないので、警告を無視するか。

概要

2026/3/13 に Vite 8 がリリースされたので、メジャーアップデートする。
https://vite.dev/blog/announcing-vite8

Vite 8 はざっくりと esbuild → Oxc 、 Rollup → Rollldown に大幅な基盤の変更があるので、慎重に実施する。
パッチバージョンのリリース頻度等を定期的に確認する。

移行ガイド
https://vite.dev/guide/migration

完了条件

• サンプルアプリの動作にデグレがないこと
• npm ls vite の結果すべての箇所で vite 8 を使用していること

[KentaHizume]

事前調査

• Vite の自作プラグインだけ要注意。
• AzureADB2C/ExternalIDで rollupOptions を使っているので注意
• @vitest/coverage-v8 はどっから出てきた？

前提
Vite 8 の移行ガイドと対象コードを突き合わせた結果、この対象で実際に対応が必要なのは、依存更新、Rolldown 化で影響を受けやすい custom plugin の見直し、Vitest 設定の整合確認です。旧ブラウザ互換は維持しない前提なので、Vite 8 の既定 browser target 引き上げはそのまま受け入れる計画にします。対象配下では、build.rollupOptions、manualChunks、optimizeDeps.esbuildOptions、esbuild option、import.meta.hot.accept(URL)、customResolver、watch.chokidar は見つかりませんでした。

計画

1. admin / consumer の Vite 周辺依存を Vite 8 互換版へ更新します。対象は package.json と package.json、package.json と package.json です。更新対象は @vitejs/plugin-vue、@vitejs/plugin-vue-jsx、@vitest/coverage-v8、vite、vitest です。あわせて lockfile を再生成します。なお、package.json の Node 24 / npm 11 要件は Vite 8 を満たしているため変更しません。
2. MSW 除外 plugin を Vite 8 向けに安全化します。vite.config.ts と vite.config.ts の excludeMsw() は、現在 renderStart で source tree 側の worker を削除しており、Rolldown ベースの build 順序差分に依存しやすい実装です。ここは未使用の resolveId を削除し、vite.config.ts と vite.config.ts で、本番 build 完了後に成果物側の worker を除去する形へ寄せるのを推奨します。
3. browser target は追加しません。旧ブラウザ互換を維持しない前提なので、vite.config.ts と vite.config.ts には build.target を新設せず、Vite 8 の既定ターゲットへ追従します。
4. Vitest の Vite 設定継承を確認します。vitest.config.ts と vitest.config.ts の mergeConfig(viteConfig(configEnv), ...) は基本維持でよい想定ですが、依存更新後に型エラーや build 用 plugin の混入が出る場合は、共有設定だけを helper 化して Vite / Vitest から参照する形に切り出します。
5. 検証は workspace scripts を使って実施します。package.json を入口に、本番 build、unit test、coverage、dev、mock を admin / consumer の両方で確認します。特に main.ts と main.ts の mock mode 分岐、browser.ts と browser.ts の worker 起動が維持されることを確認します。

[KentaHizume]

一緒にバージョンアップ

• @tailwindcss/vite@4.2.1
  • ★ 4.2.2 で対応
• @vitejs/plugin-vue@6.0.5
  • 6.0.3 で対応
• @vitejs/plugin-vue-jsx@5.1.5
  • 5.1.3 で対応
• vite-plugin-vue-devtools@8.1.0
  • 8.0.8 で対応
    • 推移的な依存関係3箇所で対応していない
    • Vite 8 unmet peer vuejs/devtools#1068
    • 内配下の vite-plugin-inspect は次のメジャーバージョン v12 で対応予定
    • https://github.com/antfu-collective/vite-plugin-inspect/releases/tag/v12.0.0-beta.1
• 警告が出てしまうのでしばらく DevTool を外す？

$ npm ls vite
dressca-frontend@1.0.0 C:\maia3\samples\web-csr\dressca-frontend
├─┬ admin@0.0.0 -> .\admin
│ ├─┬ @tailwindcss/vite@4.2.2
│ │ └── vite@8.0.10 deduped
│ ├─┬ @vitejs/plugin-vue-jsx@5.1.5
│ │ └── vite@8.0.10 deduped
│ ├─┬ @vitejs/plugin-vue@6.0.5
│ │ └── vite@8.0.10 deduped
│ ├─┬ vite-plugin-vue-devtools@8.1.1
│ │ ├─┬ vite-plugin-inspect@11.3.3
│ │ │ ├─┬ vite-dev-rpc@1.1.0
│ │ │ │ ├─┬ vite-hot-client@2.1.0
│ │ │ │ │ └── vite@8.0.10 deduped invalid: "^6.0.0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect, "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect/node_modules/vite-dev-rpc, "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect/node_modules/vite-dev-rpc/node_modules/vite-hot-client
│ │ │ │ └── vite@8.0.10 deduped invalid: "^6.0.0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect, "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect/node_modules/vite-dev-rpc
│ │ │ └── vite@8.0.10 deduped invalid: "^6.0.0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect
│ │ ├─┬ vite-plugin-vue-inspector@5.4.0
│ │ │ └── vite@8.0.10 deduped invalid: "^6.0.0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect
│ │ └── vite@8.0.10 deduped
│ ├── vite@8.0.10
│ └─┬ vitest@4.1.5
│   ├─┬ @vitest/mocker@4.1.5
│   │ └── vite@8.0.10 deduped invalid: "^6.0.0 || ^7.0.0-0" from node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect
│   └── vite@8.0.10 deduped
└─┬ consumer@0.0.0 -> .\consumer
  └── vite@8.0.10 deduped

• vitest@4.0.18
  • ★ 4.1.1 で対応
  • @vitest/coverage-v8 が vitest のバージョンに依存しているので一緒に上げる