Storybook v6 -> v7 migrate

今更ながらStorybookをv6 (6.5) から v7(7.0.20)へ移行しようと思います。
とりあえず公式migration guideを参考にしながら進めていきます。
Migration guide for Storybook 7.0

nagao

公式が用意してくださった便利コマンドを早速。
以下のような質疑応答が始まります。

$ npx storybook@latest upgrade
✔ Do you want to run the 'storybook-binary' migration on your project? … yes

✅ Adding 'storybook' as dev dependency


✔ Do you want to run the 'sb-scripts' migration on your project? … yes
✅ Updating scripts in package.json

✅ ran sb-scripts migration


✔ Do you want to run the 'new-frameworks' migration on your project? … yes
✅ Removing dependencies: @storybook/builder-webpack5, @storybook/manager-webpack5
✅ Installing new dependencies: @storybook/react-webpack5
✅ Updating main.js
✅ Updating "framework" field
✅ Removing "core.builder" field
✅ Removing "core" field
✅ ran new-frameworks migratio

✔ Do you want to run the 'autodocsTrue' migration on your project? … yes
✅ Setting 'docs.autodocs' to true in main.js
✅ ran autodocsTrue migration

nagao

質疑応答の中で非推奨なライブラリも教えてくれるのはありがたいです。

 Attention: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7:  

- @storybook/addon-postcss@2.0.0

nagao

スクリプトも書き換えてくださっている。

befor
 "storybook": "start-storybook -p 6006"

after
"storybook": "storybook dev -p 6006"

そんなスクリプトをありがたく使用します。

$ yarn storybook

nagao

エラーです。
案外すんなりいくのでは、と少し期待してしまった。。

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/~~: Missing initializer in const declaration. (8:14)

Add @babel/preset-flow (https://github.com/babel/babel/tree/main/packages/babel-preset-flow) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-flow) to the 'plugins' section to enable parsing.

nagao

エラーメッセージが教えてくれた通り @babel/preset-flow をインストールします。

$ yarn add @babel/preset-flow --dev

そして babel.config.jsに追加します。

{
  "presets": ["@babel/preset-flow"]
}

nagao

どうやら preveiw.js で使用していた addDecorator が使えなくなったようです。

TypeError: (0 , _storybook_react__WEBPACK_IMPORTED_MODULE_0__.addDecorator) is not a function

以下の公式を見ながら書き換えです。

nagao

ビルドで失敗。

Module build failed (from ./node_modules/babel-loader/lib/index.js):

ここが関係してそうです。

Storybook now uses Babel mode v7 exclusively. In 6.x, Storybook provided its own babel settings out of the box. Now, Storybook's uses your project's babel settings (.babelrc, babel.config.js, etc.) instead.

Babel mode v7 exclusively

nagao

なるほど。

In the new mode, Storybook expects you to provide a configuration file. Depending on the complexity your project, Storybook will fail to run without a babel configuration. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory:

早速実行します。
2問ほど聞かれて完了。

$ npx storybook@latest babelrc
info Generating the Storybook default babel config at /Users/nagao/products/fam-products/rogear/rogear-frontend
✔ Do you want to add the TypeScript preset? … yes
✔ Do you want to add the React preset? … yes

nagao

再度　$ yarn storybook を実行。

nagao

Done.

nagao

デプロイでこけました。

Run chromaui/action@v1

Chromatic CLI v6.18.2
https://www.chromatic.com/docs/cli

✖ Build script not found
The CLI didn't find a script called "build-storybook" in your package.json.
Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.

nagao

スクリプトがないということですので、package.jsonへの追加対応で成功しました。

  "scripts": {
     ...,
    "build-storybook": "storybook build",
  }