Module not found: Can't resolve '@emotion/react'

このエラーは、Reactプロジェクトで@emotion/reactパッケージが見つからない場合に発生します。EmotionはCSS-in-JSライブラリで、Material-UIやその他のUIライブラリでスタイリングに使用されています。

問題の原因

このエラーの主な原因は以下の通りです：

• @emotion/reactパッケージがインストールされていない
• パッケージのバージョン互換性の問題
• キャッシュやビルドファイルが古くなっている
• 依存関係の競合

解決方法

1. 基本的なインストール方法

最も基本的な解決策は、必要なEmotionパッケージをインストールすることです。

npm

npm install @emotion/react @emotion/styled

yarn

yarn add @emotion/react @emotion/styled

2. Material-UIを使用している場合

Material-UIを使用している場合は、公式の推奨インストール方法に従います。

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

3. Next.jsを使用している場合

Next.jsを使用している場合は、追加の設定とキャッシュクリアが必要な場合があります。

npm

npm install @mui/material-nextjs @emotion/cache

yarn

yarn add @mui/material-nextjs @emotion/cache

インストール後、開発サーバーを再起動するか、.nextディレクトリを削除して再ビルドします。

# .nextディレクトリを削除
rm -rf .next

# または開発サーバーを再起動
npm run dev

4. キャッシュと依存関係のクリア

上記の方法で解決しない場合は、依存関係を完全にクリアして再インストールします。

npm

rm -rf node_modules package-lock.json
npm install

yarn

rm -rf node_modules yarn.lock
yarn install

5. 強制インストール

依存関係の競合がある場合は、強制インストールを試みます。

npm

npm install @emotion/react --force
npm install @emotion/styled --force

yarn

yarn add @emotion/react --force
yarn add @emotion/styled --force

バージョン互換性に関する注意点

WARNING

以前は@emotion/coreパッケージが使用されていましたが、現在は@emotion/reactに統合されました。古いパッケージに依存している場合は、バージョンをダウングレードするか、インポート文を更新する必要があります。

古いバージョンが必要な場合：

npm

npm install @emotion/core@10.1.1

yarn

yarn add @emotion/core@10.1.1

追加のトラブルシューティング

• IDEの再起動: パッケージをインストールした後、VS CodeなどのIDEを再起動します
• 開発サーバーの再起動: 常に開発サーバーを停止して再起動します
• パッケージ.jsonの確認: 正しいバージョンが依存関係に追加されていることを確認します

{
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0"
  }
}

まとめ

Module not found: Can't resolve '@emotion/react'エラーは、主にパッケージの不足やバージョン互換性の問題で発生します。プロジェクトの設定と使用しているフレームワークに応じて、適切なインストール方法とクリーンアップ手順を実行することで解決できます。