概要
普段はnpx ncu -uでパッケージの更新を行っているが、Storybookのメジャーバージョンをあげるときにはそれではアドオンの依存関係などが壊れてしまいうまく行かない。
特に今回はessentialsが統合されたので既存アドオンの削除や置換がはっせいしｔ
Storybookが提供しているマイグレーションツールを使ったら結構楽にアップグレードできたのでメモ。
環境
- React + Vite + TypeScript
- monorepo
- UIはライブラリ的に運用
- Storybook v8 では主に @storybook/react-vite を使用
- vitest による単体テスト + @storybook/addon-vitest による story test も導入済み
コマンドでアップグレード
npx storybook@latest upgrade
選択肢はすべて y で答えた。
アップグレード後の問題
packages\ui\vitest.config.tsで下記のエラーが発生するようになった。
Type 'import(".../node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type
monorepoかつbunで管理しているせいか、viteのバージョンの不整合が発生してしまった。
node_modulesを削除し、再度 bun iを行い、vscodeを再起動することで解決した。
v9での主な変更点まとめ
| 項目 | 内容 |
|---|---|
| 📦 パッケージ構成 | renderer パッケージ廃止、統合された addon 構成へ |
| 🧹 不要パッケージの削除 | addon-essentials、旧アドオンの除去 |
| 🧩 ESLint 統合 | Storybook 向け ESLint プラグインの導入 |
| 🧪 テストアドオン | experimental-addon-test → addon-vitest へ移行 |
| 🧭 モノレポ対応 |
main.js に wrap-require 設定追加 |
| 🔄 インポート整理 | パッケージ名変更に対応してコードのインポートも自動変換 |
gfmのアップグレード (2025/06/16)
@storybook/addon-mdx-gfm@8.4.7 which depends on ^8.4.7のようなエラーがでてマイグレーションに失敗してしまう。
トラブルシューティングに従って、remark-gfmをインストールして設定する
$ npm uninstall @storybook/addon-mdx-gfm
$ npm install -D remark-gfm
packages/ui/.storybook/main.ts
+ import remarkGfm from 'remark-gfm';
// 省略
addons: [
getAbsolutePath('@storybook/addon-links'),
- getAbsolutePath('@storybook/addon-docs'),
+ {
+ name: getAbsolutePath('@storybook/addon-docs'),
+ options: {
+ mdxPluginOptions: {
+ mdxCompileOptions: {
+ remarkPlugins: [remarkGfm],
+ },
+ },
+ },
+ },
],
CJSのWarningを消す
下記のエラーが出るようになった。
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.
動的インポートで警告を消すことが可能。
issues
packages/ui/.storybook/main.ts
- import { loadConfigFromFile, mergeConfig } from 'vite';
// 省略
async viteFinal(config) {
+ const { mergeConfig, loadConfigFromFile } = await import('vite');
// 省略