添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Zenn
Open 13

Storybook v6 -> v7 migrate

nagao 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 nagao

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

 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] 
nagao nagao

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

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

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

$ yarn storybook
nagao 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 nagao