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

@storybook/addon-viewportでのエラー対処

@storybook/addon-viewportでエラー対処した際のただの備忘録です。

@storybook/addon-viewportとは？

StoryBook上で、色々なサイズやレイアウトで表示できるようにするやつです。

@storybook/addon-viewport

Build responsive components by adjusting Storybook’s viewport size and orientation

www.npmjs.com

blog.kwst.site

大名ではたらくフロントエンジニアのブログ

発生していたエラー

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を見ていると同様の問題が発生している方もいる様子でした。

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. · Issue #10204 · storybookjs/storybook

Describe the bug Hello, I have a vue-cli project with storybook for vue. Yesterday I found so many vulnerabilities provoked by this issue: [

github.com

こちらのコメントに残されているようにどうやら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",

Storybook 6 Migration Guide

Level up your component development platform

medium.com

まとめ

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

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

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