UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Storybook】storybook for vue をv5からv6にバージョンアップする

Storybookのvupを行いたい

5.3.19 → 6.5.12

以前に試みたことがあったがエラーが発生して、時間切れで断念していた

しかし、v6.4からできるようになったplay関数とtesting-libraryの連携をやる必要性が出てきたので再びvupに挑戦することにした

とりあえず、以下を実行する

$ npx npm-check-updates '/storybook/' -u && yarn install

その後、storybookを立ち上げようとしたが、やはり以下のエラーが発生して起動しない

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

webpack.config.jsがあるはずなのに、適切なloaderがないと言われている

調べると原因は、これまで.storybook配下に置いていたstorybook用のwebpack.config.jsが読まれなくなっていて、main.jsにwebpack.config.jsの設定を書かなければならないみたい

そのためmain.jsに移植することにする

これで起動した

あとは、Storybookの階層の作りかたが、「/」区切り一択になったので、Story名を以下のように変更しなければならない

Pages.Entry.Ts|PC
↓
Pages/Entry/Ts/PC

これで階層も上手く表示されるようになった

参考

https://devblog.thebase.in/entry/vue-storybook-v6