Vite 6の破壊的変更で既存プロジェクトが死ぬ — 移行ガイド完全版

$ |

$ █

Vite 6、何が変わったのか

Vite 6がリリースされて、Twitterが阿鼻叫喚になってた。理由は単純で、破壊的変更が多すぎる。Vite 5からのマイグレーション、正直かなりしんどい。でも変更の理由を理解すれば「まあ仕方ないか」となる部分も多い。この記事では主要な破壊的変更と、移行の具体的手順をまとめる。

Environment API — 最大の破壊的変更

Vite 6最大の変更はEnvironment API。これまでclient/ssrの2つだったビルド環境が、任意の数の環境をサポートするようになった。

// vite.config.ts (Vite 6)
export default defineConfig({
  environments: {
    client: { /* ブラウザ向け */ },
    ssr: { /* サーバー向け */ },
    edge: { /* エッジランタイム向け */ },
  },
});

これに伴い、ssrLoadModuleやssrTransformが非推奨になった。フレームワーク作者は対応必須。アプリ開発者も、SSR周りのカスタム設定をしてる人は影響を受ける。

デフォルト値の変更がヤバい

resolve.conditionsのデフォルト値が変わった。これが地味にハマる。あとjson.stringifyがデフォルトでtrueになった。JSONをnamed importしてる人は要注意。

// Vite 5 — これが動いてた
import { version } from './package.json';

// Vite 6 — json.stringify: true がデフォルトなので
// named importがエラーになるケースがある
// 対策: デフォルトインポートを使う
import pkg from './package.json';
const { version } = pkg;

移行の具体的手順

1. まずviteと関連プラグインを全部アップデート。2. TypeScriptの型エラーを修正（Environment API関連の型が変わってる）。3. vite.config.tsの非推奨オプションを新しいAPIに置き換え。4. SSR設定を使ってる場合はEnvironment APIに移行。5. テストを全部回して動作確認。

正直、半日は覚悟したほうがいい。大規模プロジェクトなら1-2日かかる。