📘

StorybookがViteのBuilderで動かない問題の回避策

2022/06/04に公開

背景

最近コンポーネント駆動開発に興味があり、お手軽にFigmaやAdobeXDとの連携でデザインとコードの分離ができそうなStorybookに目を付けました。
早速、Storybookを使ってみようと公式ドキュメントを読み進めていましたが、どうしてもコンパイルが遅いのがストレスでした。
そこでBuilderにVite(esbuild)を指定できることを知り、@storybook/builder-viteのアドオンを試したのですが、そのまま素直に動かず、つまずく箇所が2つあったので回避策をメモします。

動作環境

  • next.js: 12.1.6
  • react: 18.1.0
  • storybook: 6.5.6
  • @storybook/addon-interactions: 6.5.6
  • @storybook/builder-vite: 0.1.36

問題1: mdx-js/xxxxのパッケージのインストール

公式ドキュメント通りに進めて、StorybookをLocalで起動した際に、@mdx-js/xxxxのパッケージのインストールを求められるエラーが発生します。

これは中の人曰くバグらしく、対応中みたいですが、Ver.2系の@mdx-js/xxxxのパッケージのインストールすれば回避できます。
https://github.com/storybookjs/builder-vite/pull/377

自分の場合はReact系の環境なので、下記コマンドでインストールします。

npm i -D @mdx-js/react

問題2: グローバル参照エラー

次に良くあるあるですが、StorybookをLocalで起動した際に、ブラウザのコンソールでグローバル参照エラーが出ていて動きません。

これは@storybook/addon-interactionsのアドオンが内部依存しているjest-mockが原因のようです。
https://github.com/storybookjs/storybook/issues/17516

.storybook/preview-head.htmlのファイルを作成し、下記の内容を追記すれば回避できます。

<script>
  window.global = window;
</script>

まとめ

今回の問題は、下記のissueに上げています。
メンテナーのIanVSさんがすぐに反応してくれて、すぐにPRしてくれたので、まもなく注意事項が公式ドキュメントに反映されると思います。
https://github.com/storybookjs/storybook/issues/18399

ただし、私が今回紹介したものは解決策ではなく、あくまで現状の回避策であることに注意してください。
ちなみにここ最近、パッケージ名をstorybook-builder-viteから@storybook/builder-viteにリネームをしたようなのでこれも注意が必要です。
比較的最近の記事でもリネーム前の記述をしているものをちらほら見かけます。
https://github.com/storybookjs/builder-vite#project-has-been-renamed

おまけ

迅速な対応がとてもありがたかったので、気持ち程度ですがコーヒー代でもと思い、GitHub Sponsorsを通してメンテナーにスパチャしたらとても喜んでもらえました。

https://twitter.com/IanVanSchooten/status/1532758536022904834

Discussion

ログインするとコメントできます