Storybook 6 で Console アドオンが動作しないときの対処法

StorybookのConsoleアドオンを使おうと思ったら、ちょっとひっかかったので、以下、備忘録として簡単にまとめたいと思います。

目次

Consoleアドオンページをチェック

Consoleアドオンのページは、以下

This addon is maintained and recommended by the Storybook team.

Storybookチームでメンテナンスされているようなので、公式アドオンかと思います。

ドキュメント通りにセットアップ => 動作せず

以下の指示に従って、config.jsを追加。

Just import it in your storybook config.js

"Just import" に従って、以下のコードをconfig.jsに追加。

import '@storybook/addon-console';

"That's all" という事なので、yarn storybookでstorybookを起動したものの、動作せず。

リサーチ

リポジトリページをチェック

以下のリポジトリページを見ると、更新が少し古い模様。

config.js -> main.js へ統合

最近、Storybookのバージョンが6になったので、「storybook 6 console」で検索したところ、以下のページがひっかかりました。

config.js, addon.js, presets.js -> main.js へ統合

Storybook 6 でconfig.jsmain.jsに統合された模様

解決策

コード設置を config.js -> preview.js に変更

● preview.js
 ● globalなparameterやdecoratorの設定をするときはここに記述
 ● ThemeProviderの設定とかを書く

addon-consoleもglobalな設定っぽいので、preview.jsに置くのが良さそう。

リポジトリのIssueに上がっていそうな内容なので、見てみたところ一番上にそれっぽいものがありました。

BryanAdamss commented on 29 Mar
Just add below line to the preview.js
import '@storybook/addon-console'

Its work for me😂

ここでもpreview.jsへの追加が薦められていたので、以下のコードをpreview.jsに追加。

import '@storybook/addon-console';

Storybookを再起動したところ、問題なく動作しました。

まとめ

  • config.js -> main.js へ統合
  • config.jsの代わりに、preview.jsに指定のコードを追加