@storybook/addon-viewportでのエラー対処
@storybook/addon-viewportでエラー対処した際のただの備忘録です。
@storybook/addon-viewportとは?
StoryBook上で、色々なサイズやレイアウトで表示できるようにするやつです。
発生していたエラー
StorybookをDEVモードで起動すると、Chrome開発者コンソールで以下の警告が出ていました。
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
さっと見た感じでは、エラー文言等にも心当たりはなかったので、全く当たりをつけられなかったのですが、addonを有効・無効にしてみたところ、コイツが原因と発覚。
@storybook/addon-viewport
解決方法
どうやらIssueを見ていると同様の問題が発生している方もいる様子でした。
こちらのコメントに残されているようにどうやらStorybook 6.0.0以降ではBuxFixされているようでした。
Storybook 6.0.0 will got into Release Candidate real soon. The beta is out for you to try right now, it has this issue resolved.
https://github.com/storybookjs/storybook/issues/10204#issuecomment-653452993
A patch PR on master is still welcome though!
とりあえず、storybook(とついでにaddon-viewport)をバージョン上げてエラーは消えました!
“@storybook/vue”: “^6.2.9” に。
"@storybook/addon-viewport": "^5.3.21",
"@storybook/vue": "^6.2.9",
まとめ
今回は、StoryBookのaddon-viewportで発生していたエラーの対処方法をまとめておきました。
大したことない内容ですが、すぐにあたりが付かなかったのでメモ。
誰か同じ現象になっていたら、警告の文言で検索してこの記事に辿りついてくれれば!
コメント