【StoryBook】addon-viewportでのエラー対処

Nuxt

@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.
A patch PR on master is still welcome though!

https://github.com/storybookjs/storybook/issues/10204#issuecomment-653452993

とりあえず、storybook(とついでにaddon-viewport)をバージョン上げてエラーは消えました!

“@storybook/vue”: “^6.2.9” に。

    "@storybook/addon-viewport": "^5.3.21",
    "@storybook/vue": "^6.2.9",

まとめ

今回は、StoryBookaddon-viewportで発生していたエラーの対処方法をまとめておきました。

大したことない内容ですが、すぐにあたりが付かなかったのでメモ。

誰か同じ現象になっていたら、警告の文言で検索してこの記事に辿りついてくれれば!

オススメの関連商品

Note一覧

コメント

タイトルとURLをコピーしました