Storybook v9へのマイグレーションのメモ

2025年7月7日

ほとんどは公式の自動更新コマンドで移行が完了する。Storybook v9への移行を複数のリポジトリで行う必要があるため、作業をメモに残した。他リポジトリで差分があれば追記する。

#Storybook

Table of Contents

# 公式の情報を見る
# 自動更新を試す
# 自動更新による差分
# とりあえず実行してエラーを見る
# 変更に問題がないことを確認する

公式の情報を見る

次の公式のマイグレーションガイドを元に移行を行った。

自動更新を試す

次の自動更新を行うコマンドを実行し、全ての変更を許可した。

npx storybook@latest upgrade

自動更新による差分

パッケージの統廃合による変更が大変を占めていた。

- import { Meta } from "@storybook/blocks";
+ import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Getting started/Overview" />

- import { expect, userEvent, within } from "@storybook/test";
+ import { expect, userEvent, within } from "storybook/test";

-  import { create } from "@storybook/theming/create";
+ import { create } from "storybook/theming/create";

-  import { create } from "@storybook/manager-api";
+ import { create } from "storybook/manager-api";

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  addons: [
-  getAbsolutePath("@storybook/addon-interactions")
//...  
  ],
  // ...
}

@chromatic-com/storybookは内部的にstorybookに依存しているため、合わせてメジャーバージョンを上げる必要がある。これも自動更新コマンドで更新された。

{
   // ...
  "devDependencies": {
-    "@chromatic-com/storybook": "3.2.7",
+    "@chromatic-com/storybook": "4.0.1",
      //....
  }
}

とりあえず実行してエラーを見る

次のメッセージが表示され、後続のエラーの原因になっていた。

You are currently using Storybook 9.0.15 but you have packages which are incompatible with it:

- @storybook/addon-essentials@8.6.14 which depends on 8.6.14
 Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials     
- @storybook/addon-storysource@8.6.14 which depends on ^8.6.14
 Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/storysource

コードを見ると、Storybook v9で削除された@storybook/addon-essentialsと@storybook/addon-storysourceが自動的に削除または移行されていなかった。@storybook/addon-essentialsはStorybookのコアに吸収され、@storybook/addon-storysourceに@storybook/addon-docs統合された。

参考：

次のようにアドオンの構成を修正した。

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-storysource"),
+    getAbsolutePath("@storybook/addon-docs"),
  ],
  // ...

変更に問題がないことを確認する

現在のStorybookはローカルからChromaticのVisutal Regression Testを実行することが出来る。これを実行することで、問題のある差分がないことを確認した。