Storybook v8アップデート対応メモ(2024/11実施)

概要

Storybookのバージョンアップに伴う対応を行った。
基本的にMigration guide for Storybook 8.0通りに実施すれば問題はなかったが、少し修正作業も必要だったため、その内容を記載する。

環境情報

• React: 18.2.0
• Storybook: 7.5.3

以下、Storybook関連のパッケージのバージョン情報

{
  "dependencies": {
    "@storybook/addon-a11y": "^7.5.3",
    "@storybook/addon-designs": "^7.0.9",
    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.6.13",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-storysource": "^7.5.3",
    "@storybook/blocks": "^7.5.3",
    "@storybook/jest": "^0.2.3",
    "@storybook/react": "^7.5.3",
    "@storybook/react-vite": "^7.5.3",
    "@storybook/test-runner": "^0.17.0",
    "@storybook/testing-library": "^0.2.2",
    "eslint-plugin-storybook": "^0.6.15",
    "storybook": "^7.5.3",
  },
  "devDependencies": {
    "eslint-plugin-storybook": "^0.6.15",
    "storybook": "^7.5.3",
  }
}

実施内容

マイグレーションガイドに従い、以下のコマンドを実行。

npx storybook@latest upgrade

visual-tests-addonのインストールでエラーが出てインストールできなかったが、今回は導入を見送ったので、そのまま進めた。(理由は後述)

自動実行で大体のアップデートが完了して大きな問題はなかったが、自分の環境では以下の対応が必要だった。

useGlobalsを使用したエラー

.storybook/preview.tsのdecoratorの処理の中でuseGlobalsを使用している箇所がある。
そこでは現在のStorybookの色のThemeを取得している。

const [{ theme }] = useGlobals();

useGlobalsはStorybook7のときは@storybook/addonsからimportしていたが、今回のアップデートにより、＠storybook/addonsは削除されたため、エラーが発生した。

@storybook/addonsからimportしていた機能は@storybook/preview-apiか@storybook/manager-apiから利用できるとのこと。Removal of deprecated features。

Storybookのドキュメントを見ると、useGlobalsは@storybook/manager-apiから利用importしている例が多かったので、その通りにしてみたが、以下のようにエラーが発生した。

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

// エラー：Cannot read properties of undefined (reading 'getGlobals')
const [{ theme }] = useGlobals();

代わりに@storybook/preview-apiからuseGlobalsをimportすると、これまでと同様に動作した。

import { useGlobals } from "@storybook/preview-api";

const [{ theme }] = useGlobals();

どうやらuseGlobalsなどStorybookのhooksをdecoratorsやstoriesで使用する場合は、@storybook/preview-apiからimportする必要があるよう。
full migration notesに載っていた。

Storybook users have had access to a few storybook-lifecycle hooks such as useChannel, useParameter, useStorybookState; when these hooks are used in panels, they should be imported from @storybook/manager-api. When these hooks are used in decorators/stories, they should be imported from @storybook/preview-api.

その他

visual-test-addonのインストール検討

Storybook8ではvisual-test-addonがリリースされたのことが大きな変更点の一つだが、今回は導入しなかった。
軽く調べてみて、料金がどのようにかかるのかわからなかったり、そもそもの導入事例の情報も少なかったため、今回は導入を見送った。

まとめ

基本的にStorybookのマイグレーションに従えばv7からv8へのアップデートはスムーズだったが、やはり一部環境によって手こずるところもあった。
また、今回はvisual-test-addonの導入を見送ったが、今後の世間の動向を見て、導入を検討していきたい。