🧶

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

2022/10/10に公開

問題

  • @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のパッケージが大きいせいか、インストールに時間がかかりネットワークエラーになっているっぽい(その可能性が高い)

解決策

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

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

補足

  • 上記の手順で駄目な場合は、上記の3を実行する前にプロキシ設定を削除する

    yarn config delete proxy
    
  • それでも駄目な場合はnpm を使ってインストールする

    npm i
    

参考サイト

https://github.com/yarnpkg/yarn/issues/5259#issuecomment-379769451
https://github.com/mui/material-ui/issues/12432#issuecomment-411046157

Discussion