storybook for html を使おうとした時に起こったエラーとその解決方法

スタイルガイド

storybook を初めて使ったのですが、公式ページに書いてある手順を通りにstorybookを起動しようとするとなぜかエラーが出たので、また同じことにならないよう、解決方法をメモしておきます。

storybookを使うには、reactなどを使ってアプリを作成する必要があります。

適当なフォルダを作って、そのフォルダに下のコードを実行するだけでとりあえずアプリは作れました。(my-appフォルダを作成し、そのフォルダ内にreactを使ったアプリが作成されます)

npx create-react-app my-app
cd my-app

アプリ作成後は下のコードを実行し、storybookに必要なパッケージをインストールします。

npx storybook init --type html

上のコードを実行すると、何か質問みたいなものが出てきてインストールが中断されますが、enterもしくはyキーを押しておけば問題なくインストールが再開されます。

次に下のコードを実行すると、storybookがローカルで起動するはずなのですが、なぜかここでエラーが起きました。

npm run storybook

ターミナルのエラーコードを読んでみると、下のようなことが書いてあるのを発見。

Module not found: Error: Can't resolve '@testing-library/dom/dist/helpers' in '/Users/ユーザーの名前/Desktop/storybook/my-app/node_modules/@testing-library/user-event/dist/utils/misc'

my-appフォルダ内のnode_modulesの@testing-libraryフォルダを見てみると、domフォルダがなかったので、

npm i -D @testing-library/dom

を実行し、@testing-library/domをインストールした後に、再び

npm run storybook

を実行すると、ちゃんとstorybookが起動しました。

公式のミスなのか、それともアプリを作る際はあらかじめ自分で入れておかなければならないパッケージだったのかはわかりませんが、これに気づくのに結構時間がかかったので、公式ページに書いておいて欲しかったです。。。笑

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