441文字
2分
編集

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

#Storybook

#公式の情報を見る

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

#自動更新を試す

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

shell
npx storybook@latest upgrade

#自動更新による差分

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

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

<Meta title="Getting started/Overview" />
diff
- import { expect, userEvent, within } from "@storybook/test";
+ import { expect, userEvent, within } from "storybook/test";
diff
-  import { create } from "@storybook/theming/create";
+ import { create } from "storybook/theming/create";
diff
-  import { create } from "@storybook/manager-api";
+ import { create } from "storybook/manager-api";
diff
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  addons: [
-  getAbsolutePath("@storybook/addon-interactions")
//...
  ],
  // ...
}

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

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

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

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

txt
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統合された。

参考：

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

diff
/** @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 を実行することが出来る。 これを実行することで、問題のある差分がないことを確認した。

編集