最新のStorybook8をSvelte5＆Vite5で動作確認してみた

以前のStorybook&Svelte関連で執筆していた記事において、

Storybook(v8)

とSvelteとViteの組み合わせに無視できないバグが多数が報告されており、そういった状況が改善させるには少し時間がかかりそう、といった内容を紹介しました。

StorybookでSvelteプロジェクト向けのUIデザイン開発環境を構築する

フロントエンドワークショップ環境・『Storybook』をSvelteで使うためのインストール手順

そこからおおよそ、4ヶ月が経過し、つい先月の10月に

Svelte5

が正式にリリースしました。
そして、海外のフォーラム界隈に、

「Storybook8 & Svelte5 & Vite5」

の組み合わせも使えるようになった、との内容を目にするようになりました。
"百聞は一見に如かず"ということで、この組み合わせが動作するのか、サクッと確認してみようと思います。

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

Storybookプロジェクトのアップグレード

こちらの

過去の記事

プロジェクトを使って、NPMパッケージの各バージョンを手動で引き上げます。
この記事の執筆当時はまだSvelte5が正式にリリース前で、メインでSvelte4を使っていました。
ここではSvelte5コンポーネントへの巻き上げの詳細は説明しませんが、以下のMigration Guideをよく観てから必要に応じて修正してください。

参考｜Svelte 5 migration guide

個別のStorybookプロジェクトの状況にもよりますが、アップグレードの方向性は以下のようにしました。

開く/閉じる

            + storybook: v7 --> v8
+ svelte:    v4 --> v5
+ vite:      v4 --> v5

さて、アップグレード方法にもいくつか方法があり、Storybookがコマンドとして提供している方法でアップグレードしても良いでしょう。

Migration guide for Storybook 8.0

この方法では、

開く/閉じる

            $ npx storybook@latest upgrade

とすることで、Storybook8がインストールされます。
あとは必要に応じて、以下のコマンドを実行すると、古い設定ファイルなどのクリーンアップやちょっとした修正も行ってくれるようです。

開く/閉じる

            $ npx storybook automigrate --config-dir <.storybookのパス>

手動で関連のパッケージを引き上げる場合には、

開く/閉じる

            $ yarn add [-S/-D] <アップグレードしたいパッケージ>@latest

を一つ一つやってもよいですが、

package.json

の手動で編集した後に

yarn install

したほうが効率的です。
著者の環境で動作確認用にアップグレードした結果は以下のようになります。

開く/閉じる

            $ npx storybook --version
8.4.2

$ npx vite --version
vite/5.4.10 linux-x64 node-v20.16.0

$ yarn list | grep -i svelte@
│  ├─ @storybook/svelte@8.4.2
├─ @storybook/svelte@8.4.2
├─ @sveltejs/vite-plugin-svelte@4.0.0
├─ @tsconfig/svelte@5.0.4
├─ htmlparser2-svelte@4.1.0
├─ svelte@5.1.10
│  └─ htmlparser2-svelte@4.1.0

Viteのビルドエラー

関連パッケージをアップグレードし、おもむろにStorybookサーバーを起動してみましょう。
これで何ごともなく動いてくれたら使う側としてはもう言うことがありません。
で、自分の最初の結果はと言うと...

開く/閉じる

            The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.js file.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /node_modules/@sveltejs/vite-plugin-svelte/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:304:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:594:13)
    at resolveExports (node:internal/modules/cjs/loader:592:36)
    at Module._findPath (node:internal/modules/cjs/loader:669:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1131:27)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/.storybook/main.js:2:24)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ということでViteの内部エラーで止まってしまうようになりました。
結局のことろ、Storybookのメイン設定ファイルとなる、

.storybook/main.js

が

CommonJS形式

のままだとダメ、ということのようです。
これは、

main.js

から

main.ts

に変更することで対処可能です。
一例として、

開く/閉じる

            import {StorybookConfig} from '@storybook/svelte-vite';

const config: StorybookConfig = {
  stories: [
    "../stories/components/**/*.stories.@(js|ts|svelte)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: {
        name: '@storybook/builder-vite',
        options: {
          viteConfigPath: './customVite.config.js',
        },
    },
  },
  framework: "@storybook/svelte-vite",
  docs: {
    autodocs: "tag",
  },
  async viteFinal(config) {
        return config;
  }
};
export default config;

とします。
ちなみに個人的な設定として、vite設定ファイルは分割していますので、設定の別ファイル

customVite.config.js

を以下のように設けています。

開く/閉じる

            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [
        svelte(),
        tsconfigPaths()
    ]
})

こちらはCommonJSのままでも問題ありません。

Storybookサーバーが立ち上がらないときの対処法

Storybook8にアップグレード後に、Devサーバーがそのままブラウザに表示されなくなることがあります。
そんなときには、

「--no-open」

を使うとブラウザからアクセスできるようになるかもしれません。

開く/閉じる

            $ storybook dev -p [ポート番号]
👇
$ storybook dev -p [ポート番号] --no-open

SvelteのPreprocessを設定する

前回も触れた内容ですが、Storybook8の初期に存在していた

@sveltejs/vite-plugin-svelte

が正常に動かないバグのため、

「<script lang="ts">」

などのPreprocessが使えない状態にありました。
既に、

@sveltejs/vite-plugin-svelte

も最新のバージョンが問題なく動作するように修正されていますので、

こちらのリファレンス

を参考に

vite.config.js

等で設定されると良いでしょう。
今回紹介したやり方だと、

svelte-preprocess

のパッケージを追加しておき、

開く/閉じる

            $ yarn add -D svelte-preprocess

インストールできたら、

customVite.config.js

を以下のように修正します。

開く/閉じる

            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [
        //👇利用するPreprocessを有効にする
        svelte({
            preprocess: [sveltePreprocess({ typescript: true, scss: true })]
        }),
        tsconfigPaths()
    ]
})

「<script lang="ts">」内で別のSvelteコンポーネントを呼び出せない問題

先程の内容からも最新の

@sveltejs/vite-plugin-svelte

が動作することで、Svelte5もVite5も問題なく動かせるようになって、ようやく厄介なバグも一掃されたと思いきや、typescriptのPreprocessにおいて、以下のような不具合に遭遇しました。

開く/閉じる

            <script lang="ts">
    import PageHeader from './PageHeader.svelte';

    //...中略
</script>

...

<PageHeader />

...

この状態でサーバーを起動すると、

のように外部のsvelteファイルを読み込んでくれないようです。
このバグの出所を良くみてみると、

sb-preview/runtime.js

が原因となっているようで、現状、バグフィックスが完了するまではもう少し辛抱する必要がありそうです。
ユーザー側のできる対処法として、外部のSvelteコンポーネントを親コンポーネントから呼び出したい場合、typescriptのPreprocessは使わずに、

開く/閉じる

            <script>
    import PageHeader from './PageHeader.svelte';

    //...中略
</script>

...

<PageHeader />

...

とすると問題なくプレビュー画面が起動します。

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

まとめ

個人的な感想で、ようやくまともにSvelte5コンポーネントがStorybookで使えるようになった安堵感があります。
これで心置きなく過去のSvelteプロジェクトをver.5へマイグレできるようになって喜ばしい限りです。