はじめに
storybookのバージョンが6系だったので、バージョンを7系に上げる対応をしました。
環境
- NextJs: 14.0.1
- react: 18.2.0
- storybook: 6.5.13 → 7.6.12
バージョンアップ
公式によると下記コマンドでバージョンを上げることができるとのことなので早速打ってみる
$ npx storybook@latest automigrate
最新は7.6.12なのでそこまでバージョンを上げる
バージョンアップ中いくつか質問されますが、基本的にyesで進行
動作確認
環境やバージョンアップ後
$ yarn storybook
storybookが表示された！
ここから沼にハマっていく...
エラー1
コミットができない。
husky & lint-stagedを使用してコミット時にlintを走らせるがlintが通らない
TypeError: Error while loading rule 'react/jsx-no-target-blank': `[[GeneratorState]]` is not present on `O`
早速エラーメッセージで検索をするとStackOverflowで同じ事象っぽいのがヒットした
After some research, I found out similar issues reported on the eslint-plugin-react repo and on its dependencies. This issue is related with errors in dependency resolution, when multiple incompatible versions of the same package are installed by the package manager. A similar issue was reported here. The solution is to remove duplicate dependencies
要するに依存関係が重複しているようだ。
If you are using yarn, you can do the same by installing yarn-deduplicate
に従いコマンドを打ってみる
$ npx deduplicate yarn.lock
依存化解消されコミットできた！
エラー2
コミットができて無事解決！と思ったがそんなことはなかった。
storybookが動かなくなってしまった
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
調べてみるとbabel周りのエラーが起きているようでモジュールをうまく解決できないらしい
解決へ
問題は単純でした。
エラー1のタイミングでnpx deduplicate yarn.lockをするのではなく単純に
-
node_modules/を削除 -
yarn.lockを削除 yarn install
これで重複したパッケージも解決され、storybookも動くことが確認できました！
まとめ
解決方法は基本的な事かもしれませんが、ハマると意外と視野が狭くなってしまいがちなので何かハマった際の糸口になってくれると嬉しいです。
こういったエコシステムは便利ですが運用で意外とコストをかけてしまうことが多いです。
精進しないとですね 