Storybookを使っていると、アドオンパネルが開かなくなった。
Controlsでプロパティの変更ができず、ハマったので対応方法をメモ。
環境
Storybook 6.5.13 for React。
問題
StorybookをGoogle Chromeで開き、 Show addons 状態にしても、アドオンパネルが表示されない。
一度発生すると、ヘッダーアイコンのクリック、キーボードショートカット A 、どちらを使っても解消しないが、Firefoxなどの別ブラウザで開くと、アドオンパネルが表示される。
対応
Knobsのアドオンパネルが開かないというissueがあり、その中のコメントに対応方法が記載されていた。
Sometimes the UI gets into a funny state where the addon panel is hidden based on local storage. In that case, running
localStorage.clear()in the browser console and hard-reloading the page should fix it.
原因は同じようなものだろうと思ったので、記載の通り、ブラウザの開発者ツールを開き、コンソールタブから localStorage.clear() を実行。
ページを再読み込みすると、無事に表示された。
UIの状態管理をローカルストレージで行っているようで、おかしくなったらクリアすればいい模様。
別ブラウザで開くと解消したのも、ローカルストレージの状態によるものと思われる。未確認だが、シークレットウィンドウで開いても解消するかもしれない。
振り返り
スプリントレビューでコンポーネント確認を行う直前に発生したのでえらく焦った。
参考にしたissueは #17714 を含む6.5.0-alphaのリリースでcloseされていたが、どうもこのPRはアドオンパネルの開閉ボタンの追加で、ローカルストレージの不整合の対応ではなさそう。
とりあえず、Storybookでトラブルが発生したら、 localStorage.clear() してみることとしよう。
