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

公式の情報を見る#

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

自動更新を試す#

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

1
npx storybook@latest upgrade

自動更新による差分#

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

1
 import { Meta } from "@storybook/blocks";
2
 import { Meta } from "@storybook/addon-docs/blocks";
3

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

1
import { expect, userEvent, within } from "@storybook/test";
2
import { expect, userEvent, within } from "storybook/test";

1
 import { create } from "@storybook/theming/create";
2
import { create } from "storybook/theming/create";

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

1
/** @type { import('@storybook/react-vite').StorybookConfig } */
2
const config = {
3
  addons: [
4
  getAbsolutePath("@storybook/addon-interactions")
5
//...
6
  ],
7
  // ...
8
}

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

1
{
2
   // ...
3
  "devDependencies": {
4
    "@chromatic-com/storybook": "3.2.7",
5
    "@chromatic-com/storybook": "4.0.1",
6
      //....
7
  }
8
}

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

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

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

3
- @storybook/[email protected] which depends on 8.6.14
4
 Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
5
- @storybook/[email protected] which depends on ^8.6.14
6
 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統合された。

参考：

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

1
/** @type { import('@storybook/react-vite').StorybookConfig } */
2
const config = {
3
  addons: [
4
     getAbsolutePath("@storybook/addon-links"),
5
     getAbsolutePath("@chromatic-com/storybook"),
6
    getAbsolutePath("@storybook/addon-essentials"),
7
    getAbsolutePath("@storybook/addon-storysource"),
8
    getAbsolutePath("@storybook/addon-docs"),
9
  ],
10
  // ...

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

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