[svelte-preprocess] Encountered type error を解決する

状況

Svelte でアプリケーション開発を行っている中で次のようなエラーが出ています。

解決方法

✅ svelte-preprocess を更新しよう！

npm update svelte-preprocess@latest
# or
yarn upgrade svelte-preprocess@latest

package.json (一部抜粋)

"devDependencies": {
  "svelte": "^4.2.18",
  "svelte-check": "^3.8.4",
-  "svelte-preprocess": "^4.10.4",
+  "svelte-preprocess": "^6.0.1",
}

私の場合は上記のようにアップグレードすることで解決しました。

バージョン移行に関して

バージョン更新における移行については下記のリンクを参照して下さい。v3 から v4、v5 から v6 への移行について簡潔にまとまっています。

それでもエラーが解決しない！

svelte-preprocess で <script lang=ts> を処理しています。

そのため rollup.config.js または vite.config.js で sveltePreprocess を設定できているかを確認してみましょう。以下は設定例です。

rollup.config.js

import svelte from "rollup-plugin-svelte";
import commonjs from '@rollup/plugin-commonjs';
import { sveltePreprocess } from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess()
    })
  ]
};

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess';

export default defineConfig({
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
    }),
  ],
});

そのほか config の詳しい設定方法については Rollup の公式ドキュメントや Vite の公式ドキュメントを参考にしてください。

Svelte Preprocess とは

PostCSS、SCSS、Less、Stylus、CoffeeScript、TypeScript、Pug などをサポートしているプリプロセッサです。めっちゃ便利！

---

この記事が役に立ったら 🩷 を頂けると嬉しいです！