MUI周りの依存関係エラーを解決した話

初めに

この記事では、MUIを使用している際に発生した依存関係のエラーとその解決方法について説明します。

問題

以下コードで、'@mui/system' should be listed in the project's dependencies. Run 'npm i -S @mui/system' to add iteslintimport/no-extraneous-dependencies エラーが発生しました。

import { styled } from '@mui/system';

試したこと

@mui/system が依存関係に追加されていることを確認

package.json には @mui/system がなかったものの、yarn.lock ファイルと node_modules フォルダ内で @mui/system が正しく追加されていることを確認しました。具体的には、@mui/material の依存関係に @mui/system が含まれていることが以下のように確認できました。

"@mui/material@^5.14.10":
  version "5.15.15"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.15.tgz#e3ba35f50b510aa677cec3261abddc2db7b20b59"
  integrity sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==
  dependencies:
    "@mui/system" "^5.15.15"

プロジェクトの依存関係に追加

package.json に存在しなかったので、以下コマンドを実行して package.json の dependencies に記載されましたが、解決できなかったです。

yarn add @mui/system

解決方法

以下のインポート方法に変えたら、ESLintのエラーが解消できました。

import { styled } from '@mui/material/styles';

原因

原因として考えられるのは、MUIのバージョンや設定により、@mui/system のモジュールが適切に認識されない場合があることです。特に、@mui/material の依存関係に含まれているスタイル関連の機能を利用する場合、@mui/material/styles からインポートする方が一般的のようです。

終わりに

この記事では、MUIを使用している際に発生した依存関係のエラーとその解決方法について説明しました。特に、インポート元を変更することで簡単に問題を解決できる場合があることを紹介しました。同様のエラーが起きたら、プロジェクトの依存関係を見直し、適切なインポート元を選択することで解決していきたいです。