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

課題

いきなり npm install --save-dev svelte@latest をしてしまうと依存関係のエラーに見舞われます。
また、ESLint プラグインが変更されています。

とあるプロジェクトの依存関係

量が多いですが Svelte 関連のモジュールほぼすべてが依存しているので当然と言えば当然ですね。

> npm ls svelte  
nostter@0.0.1 C:\Users\SnowCait\Documents\GitHub\nostter\web
├─┬ @sveltejs/kit@1.25.0
│ ├─┬ @sveltejs/vite-plugin-svelte@2.4.2
│ │ ├─┬ @sveltejs/vite-plugin-svelte-inspector@1.0.3
│ │ │ └── svelte@3.59.2 deduped
│ │ ├─┬ svelte-hmr@0.15.2
│ │ │ └── svelte@3.59.2 deduped
│ │ └── svelte@3.59.2 deduped
│ └── svelte@3.59.2 deduped
├─┬ @tabler/icons-svelte@2.34.0
│ └── svelte@3.59.2 deduped
├─┬ eslint-plugin-svelte3@4.0.0
│ └── svelte@3.59.2 deduped
├─┬ prettier-plugin-svelte@2.10.1
│ └── svelte@3.59.2 deduped
├─┬ svelte-check@3.5.1
│ ├─┬ svelte-preprocess@5.0.4
│ │ └── svelte@3.59.2 deduped
│ └── svelte@3.59.2 deduped
├─┬ svelte-i18n@2.3.1
│ └── svelte@3.59.2 deduped
└── svelte@3.59.2

ESLint plugin

eslint-plugin-svelte3 が deprecated になっており eslint-plugin-svelte への移行が必要です。

https://sveltejs.github.io/eslint-plugin-svelte/migration/#from-eslint-plugin-svelte3

解決手順

先に周辺の移行を済ませてしまいます。
WARN が出ない順に解決していくといいのではないかと思います。

ESLint plugin

npm uninstall eslint-plugin-svelte3
npm install --save-dev eslint-plugin-svelte

svelte-i18n は 3.7.4 にバグがあり Named export 'IntlMessageFormat' not found. エラーが発生するので >= 4.0.0 にするか 3.7.3 で止めておきます。

i18n

npm install svelte-i18n@latest

SvelteKit も最新に。

SvelteKit

npm install --save-dev @sveltejs/kit@latest

後は通常通り Svelte のバージョンを上げます。

Svelte

npm install --save-dev svelte@latest

その他必要なものがあればバージョンを上げます。
ただし Prettier を 3.0.0 以降にすると *.svelte のフォーマットがうまく動かなかったので ^2.8.8 のままにします。

最後に ESLint plugin が変わったので設定も変更しておきます。

.eslintrc.cjs

 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	plugins: ['@typescript-eslint'],
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: { parser: '@typescript-eslint/parser' }
+		}
+	],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true
+	},
+	rules: {
+		'svelte/valid-compile': 'warn',
+		'@typescript-eslint/no-explicit-any': 'warn'
 	}
 };

アプリ

アプリ側のコード修正は不要でした。
フォーマットで多少の差分は出るかもしれません。