Open
13
Storybook v6 -> v7 migrate
今更ながらStorybookをv6 (6.5) から v7(7.0.20)へ移行しようと思います。
とりあえず公式migration guideを参考にしながら進めていきます。
Migration guide for Storybook 7.0
公式が用意してくださった便利コマンドを早速。
以下のような質疑応答が始まります。
$ 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
質疑応答の中で非推奨なライブラリも教えてくれるのはありがたいです。
Attention: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7:
- @storybook/[email protected]
スクリプトも書き換えてくださっている。
befor
"storybook": "start-storybook -p 6006"
after
"storybook": "storybook dev -p 6006"
そんなスクリプトをありがたく使用します。
$ yarn storybook
エラーです。
案外すんなりいくのでは、と少し期待してしまった。。
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.