SvelteKit v2対応の罠

はじめに

Svelteでアプリを構築するための公式フレームワークである SvelteKit のバージョン2が2023年12月にリリースされました。
マイグレーションツールも公開されており簡単に更新できるかなと思ったら、ちょっとしたはまりどころがあったので、今回は自分がハマったポイントをまとめてみようと思います。
参考URL : https://kit.svelte.dev/docs/migrating-to-sveltekit-2

結論

typescriptを使っている場合に moduleResolution が node から bundler になったため、モジュールの解決が厳密になり、export されていないモジュールは読み込めなくなりました。
なので、 export されていないモジュールを読み込んでいた部分のパス解決に失敗していました。

詳細

問題が起きたシステムでは Carbon Components Svelte というUIライブラリを使っていました。

その中の DataTable テーブルを表示するためのモジュールを使っていたのですが、テーブルで扱える型が Carbon Components Svelte 定義している専用型のでした。

SvelteKit v1の時は

import type {
    DataTableHeader,
    DataTableRow,
  } from 'carbon-components-svelte/types/DataTable/DataTable.svelte.d.ts';

こうして型を読み込んでいたのですが、Carbon Components Svelte の package.jsonを見るとtypes 以下のディレクトリは export されていません。
参考URL : https://github.com/carbon-design-system/carbon-components-svelte/blob/v0.85.0/package.json#L7-L25

なので、SvelteKit v2では

import type {
    DataTableHeader,
    DataTableRow,
  } from 'carbon-components-svelte/src/DataTable/DataTable.svelte';

このようにexportされているパスから型定義を読み込む必要があります。

まとめ

実は問題の修正のみであれば、エラー出ているところを IDE の指示通りに修正していけば直ってしまったので、修正だけは割と簡単にできました。
しかし原因がわからずモヤモヤしたので、深堀をしてみました。
moduleResolution 従来の node にするという方法もありますが、標準設定の方が IDE のサポートを受けやすいなどのメリットが大きいので今後も標準設定に沿った開発環境の構築をしていきたいと思います。