Svelte 3 から 4 へのバージョンアップ

• URL: https://zenn.dev/snowcait/articles/62cec4ce8de6a0
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: Svelte 3 から 4 へアップグレードする際、依存パッケージを一括で上げようとすると依存関係エラーが発生するため、周辺ライブラリから段階的に移行する必要がある。eslint-plugin-svelte3 が deprecated となっており、eslint-plugin-svelte への移行と設定ファイルの書き換えが必要になる。svelte-i18n はバージョン 3.7.4 に既知のバグがあるため 4.0.0 以上か 3.7.3 に固定する対処が必要。Prettier は 3.0.0 以降で Svelte ファイルのフォーマットが正常に動作しないケースがあり、2 系に据え置くのが安全とされている。アプリ側コード自体の修正は不要で、移行は主にツールチェーン側の更新になる。

詳細

移行の基本方針は「WARN が出ない順に周辺ライブラリを先に更新してから Svelte 本体を上げる」という段階的アプローチ。

主な移行ステップ:

• eslint-plugin-svelte3 をアンインストールし eslint-plugin-svelte をインストール
• .eslintrc.cjs の extends・plugins・overrides を新しい形式に書き換え（svelte-eslint-parser を parser として指定）
• svelte-i18n をバグのある 3.7.4 を避けて 4.0.0 以上に更新
• @sveltejs/kit を最新に更新してから svelte 本体を更新
• Prettier は 3.0.0 以降で *.svelte フォーマットに問題があるため ^2.8.8 を維持

npx svelte-migrate@latest svelte-4 を実行すると View Transition API の local 属性のデフォルト変更など細かい移行もカバーできる。Prettier の回避策として –plugin オプション指定でフォーマットを動作させることも可能。