🧶

【Storybook】MUIアイコンを含んだコンポーネントをビルドする

2022/10/10に公開

Next.js

問題

@mui/icons-materialを使用したコンポーネントがStorybookに上手くビルドされない
（@mui/icons-materialを使ってないコンポーネントはビルドできる）

環境

"dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.8",
    "@mui/styled-engine-sc": "^5.10.6",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
},

既に試していること

公式ドキュメントに沿ってインストール済み
アイコン使用箇所で正しくimportできているか確認済み
```
import { ArrowDropDown } from '@mui/icons-material'
```
storybookのキャッシュ削除
```
rm -rf node_modules/.cache/storybook
```

原因

yarnによるpackageインストール中にネットワークタイムアウトが発生している?みたい。
- yarnのタイムリミットは30秒
- @mui/icons-materialのパッケージが大きいせいか、インストールに時間がかかりネットワークエラーになっているっぽい（その可能性が高い）

解決策

.yarnrcにタイムリミットを拡張する設定を追加する
```
network-timeout 1000000
```
既存のnode_modules, yarn.lockを削除する
```
rm -rf node_modules yarn.lock
```
package を再インストール
```
yarn
```

↓

上記実行すると、無事にStorybookをビルドすることができた🎉

補足

上記の手順で駄目な場合は、上記の3を実行する前にプロキシ設定を削除する
```
yarn config delete proxy
```
それでも駄目な場合はnpm を使ってインストールする
```
npm i
```

【Storybook】MUIアイコンを含んだコンポーネントをビルドする

問題

環境

既に試していること

原因

解決策

補足

参考サイト

Discussion