Material UI でpaginationが使えない!アップデートとインストール!Module not found: Can’t resolve ‘@material-ui/lab/

画像はイメージ

Module not found: Can’t resolve ‘@material-ui/lab/Pagination’ in …

material-ui/labをinstall か addしよう!

material-ui/labの中に入っている便利なコンポーネント

  • Alert
  • Autocomplete
  • Pagination
  • Rating
  • Skeleton
  • Speed Dial
  • Toggle Button
  • Tree View

これらの便利なコンポーネントを使うためにまずはnode-moduleにmaterial-ui/labをインストールする必要があります。

タイトルのエラーが出たのはインストールしていなかったから!😲

material-ui/labのインストール方法

// with npm
npm install @material-ui/lab
// with yarn
yarn add @material-ui/lab

注意点1:material-ui/core が入っていない場合にはcoreもインストール

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

注意点2:インストールするパスを間違えない

自分のコマンドが今どこにいるのか確認をして、自分のnode-moduleがどこにあるのか確認をして、インストールをしないと、動きまへん。

この辺は私良くわかりません。これから勉強しますが、なんか今作ってるアプリにはnode-moduleが2つ出来上がっていて、てんやわんやしてしまいました。てへ

*追記 なんか僕の場合ですけど、2つnode-modulesがあって、どっちかにmaterial-ui/labが入ってたら動きました…。多分package.jsonの設定とかかもしれないんですけど。これからチェック。

→もしかしたら、material-ui/labをインストールした時に、coreが消えたので、再インストールしたんですね?それが直接の解決要因だったかも。海外の事例にも再インストールってあったし。

material-ui/labはまだステイブルじゃない

material-ui/labはコアシステムにはまだ入れないような、作っている途中のシステムです。

今後、破壊的な変更が起きる可能性があるので、その点は注意しましょう。

余談:海外の事例 バージョンの問題

material-ui ‘createSvgIcon’ is not exported from ‘@material-ui/core/utils’

同じmaterial-ui/lab関係で報告されていたのが、バージョンの問題。

上記のエラーの場合にはCoreとLabを最新バージョンに変えたらいいよって話もあった。

アップデートするとか、再インストールするとか、一回消してからもう一度インストールするとか。参考までにhttps://stackoverflow.com/questions/61147548/material-ui-createsvgicon-is-not-exported-from-material-ui-core-utils