🆙

SvelteKit v2 へのバージョンアップ

2023/12/16に公開

Svelte

SvelteKit

tech

SvelteKit v2 がリリースされました。
https://svelte.dev/blog/sveltekit-2

基本的にはこちらに従って移行作業を行います。

Svelte のバージョンアップ

Svelte 4 が必要なので 4 未満の場合は 4 へバージョンアップします。

SvelteKit のバージョンアップ

マイグレーション用のツールが用意されているので実行するだけです。
package.json やコードを変更してくれます。

モノリポの場合は各プロジェクトのルートディレクトリで実行してください。
対象のディレクトリを聞かれますが基本的には src だけで良いでしょう。

npx svelte-migrate sveltekit-2

git diff で差分を確認します。

package.json

$ git diff HEAD^ package.json
diff --git a/web/package.json b/web/package.json
index c34fde7..93c305b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,8 +16,9 @@
        "devDependencies": {
                "@beyonk/gdpr-cookie-consent-banner": "^11.0.0",
                "@playwright/test": "^1.32.2",
-               "@sveltejs/adapter-auto": "^2.1.1",
-               "@sveltejs/kit": "^1.27.6",
+               "@sveltejs/adapter-auto": "^3.0.0",
+               "@sveltejs/kit": "^2.0.0",
+               "@sveltejs/vite-plugin-svelte": "^3.0.0",
                "@types/beyonk__gdpr-cookie-consent-banner": "^9.0.2",
                "@types/emoji-mart": "^3.0.12",
                "@types/qrcode": "^1.5.5",
@@ -33,8 +34,8 @@
                "svelte-check": "^3.6.0",
                "tslib": "^2.6.2",
                "typescript": "^5.3.2",
-               "vite": "^4.5.0",
-               "vitest": "^0.34.6"
+               "vite": "^5.0.0",
+               "vitest": "^1.0.0"
        },
        "type": "module",
        "dependencies": {

その他の変更点は Migrating to SvelteKit v2 に詳しく書いてあるので確認しておきましょう。

npm install

npm install をして適用しようとするとエラーになるので --legacy-peer-deps オプションを付けて実行します。

npm install --legacy-peer-deps

その後もう一度 npm install したら差分が出ていたのでやっておいた方がよさそうです。

npm install

Svelte のバージョンアップ

SvelteKit のバージョンアップ

npm install

Discussion