SvelteKit + Storybook & viteの環境のセットアアップしてみた

最近熱いSvelteKitを使ってStorybookを導入する際にESmoduleとcommonJSがごっちゃになって動かないことが起こったのでセットアップ方法をまとめました。

sveltekitの導入

まず、ドキュメントどおりにsveltekitの導入をします。
https://kit.svelte.dev/

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

以下svelteプロジェクト内で行います

storybookの導入

続いてstorybookもセットアップしていきます。
以下のコマンドにてセットアップを行ってくれるので行いましょう。

npx sb@next init

すると
.storybookというディレクトリが作られ、src/stories直下に色々ファイルが作られます。
.storybookはstorybookの設定フォルダです。
storyディレクトリはサンプルが入っています。

以上でセットアップ完了だと思いきや

npm run storybook

とするとエラーが起きてくれます。
では修正していきましょう！

module関係の修正

まず、なぜエラーが起こっているのかですが、エラーの出ている箇所をみると、.storybook/main.jsはcommonJSで書かれています。
次に読み込もうとしているファイルrequire(../svelte.config.js).preprocessはESmoduleで書かれています。
なので、commonJSからESmoduleを読む場合はDynamic importを使用します。

svelteOptions: {
-	preprocess: require('../svelte.config.js').preprocess
+       preprocess: import('../svelte.config.js').preprocess
}

ただ、プロジェクト直下のpackage.jsonの設定で

"type":"modules"

と書かれているのでESmoduleを使うようになっています。
なので、main.jsやpreview.jsがESmoduleとして作っていることになってしまいます。
ただ、@storybook/core-common/dist/cjs/utils/interpret-require.jsここからそのmain.jsを読み込んでいてcommonJSとして読もうとしているみたいです。
なので、main.jsを明示的にcommonJSとして指定する必要があるので、
main.jsをmain.cjsと名前を変えます。
preview.jsもついでにpreview.cjsとしておきましょう。

これにてmodule関係の修正は完了です！

ここからは、storybookをviteで動かしたいと思います！

storybookにviteを導入

まず、builderを導入します。

npm install -D storybook-builder-vite

また、必要なaddonも入れておきます。

npm install @storybook/addon-svelte-csf

その次にmain.jsで実際に導入します。

module.exports={
 core: {
    builder: "storybook-builder-vite"
  },
 ....略
 }

では、実行！

結構スピーディに起動してくれます！

ただ、これだけではsvelteのエイリアス等($lib,$app)などが使えないので使えるようにしていきます。

エイリアスの設定

$appという名前のエイリアスがないとsvelteの$app/*等が使えないので修正と
$libにlibディレクトリのパスを入れてsvelte同様にインポートできるように変更します。
module.exportsの中に以下のコードを加えます。

async viteFinal(config, { configType }) {
	const { resolve } = await import('path');
	config.resolve.alias = {
		$lib: resolve('src/lib'),
		$app: path.resolve('.svelte-kit/runtime/app')
	};
	return config;
}

これでセットアアップは完了です！