🐣

WindowsにReact + TypeScript + Storybook環境を構築するときにはまったこと

2023/04/02に公開

React

Storybook

TypeScript

tech

前提

OS

Windows 11 Home

バージョン

node v16.14.0
npm 8.19.3
react 18.2.0
typescript 4.9.5
storybook 6.5.16

はまったこと

Storybookをうまく導入できない

事象

コマンドプロンプトから npx storybook init でStorybookを導入するときに以下の課題が発生する。

.storybookフォルダが作成されない
package.jsonのscriptsにStorybookのコマンドが追加されない

解決策

コマンドプロンプトを管理者として実行し、npx storybook init を行う。

Module not foundエラーになる

事象

Storybook導入後、npm run storybook を実行すると、Module not found: Can't resolve '@testing-library/dom' in '/home//projects/oss/storybook-react-design-system/node_modules/@testing-library/user-event/dist' node_modules/@testing-library/user-event/dist/click.js などのエラーが発生。

解決策

npm install --save-dev @testing-library/dom を実行。