Module not found: Error: Can't resolve 'react-dom/client'

React 18以降、新しいクライアントAPIが導入されたことで、react-dom/clientモジュールの解決エラーが頻繁に発生しています。この問題は、Reactのバージョンとインポート方法の不一致が原因で起こります。

問題の原因

Module not found: Error: Can't resolve 'react-dom/client' エラーは以下の状況で発生します：

• React 17以下を使用しているのに、React 18のインポート方法（react-dom/client）を使用している
• パッケージのバージョンが不一致（reactとreact-domのバージョンが異なる）
• node_modulesのキャッシュ問題やインストール不備

このエラーが発生する典型的なケースは、React 17環境でReact 18用のコードを使用している場合です。

解決方法

方法1: React 18にアップグレードする（推奨）

最新のReact 18を使用する場合は、以下の手順でアップグレードします：

// package.json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

# パッケージのアップデート
npm install react@latest react-dom@latest

# node_modulesとpackage-lock.jsonを再生成
rm -rf node_modules package-lock.json
npm install

React 18用の正しいインポート方法：

// index.js (React 18用)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

TIP

TypeScriptを使用している場合は、型定義も更新しましょう：

npm install @types/react@latest @types/react-dom@latest

方法2: React 17以下に合わせてコードを修正する

React 17以下を使用する場合は、インポート方法を従来の形式に戻します：

// index.js (React 17用)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

React 17をインストール

# React 17を明示的にインストール
npm install react@17 react-dom@17

# TypeScriptの場合
npm install react@17 @types/react@17 react-dom@17 @types/react-dom@17

バージョン確認

# インストールされたバージョンを確認
npm list react --depth=0
npm list react-dom --depth=0

方法3: クリーンインストールを行う

依存関係の問題が解消しない場合は、クリーンインストールを試してみましょう：

# node_modulesとロックファイルを削除
rm -rf node_modules package-lock.json

# クリーンインストール
npm install

# キャッシュクリア（必要に応じて）
npm cache clean --force

バージョン互換性テーブル

Reactバージョン	インポート方法	レンダリング方法
18.0+	react-dom/client	createRoot().render()
17.0以下	react-dom	ReactDOM.render()

よくあるミスと解決策

WARNING

注意点: reactとreact-domのバージョンは常に一致させてください。不一致による問題の90%以上はバージョンの不整合が原因です。

1. npm-check-updates使用後は必ずnpm install

   ncu -u  # パッケージ更新後は
   npm install  # 必ず実行

2. TypeScriptを使用している場合

   # 型定義の更新を忘れずに
   npm install @types/react @types/react-dom

3. キャッシュ問題の解消

   # キャッシュをクリアして再インストール
   npm cache clean --force
   rm -rf node_modules
   npm install

まとめ

react-dom/clientモジュール解決エラーは、Reactのバージョンとインポート方法の不一致が主な原因です。現在のプロジェクトの状況に合わせて：

1. React 18にアップグレードするか
2. コードをReact 17以下に合わせて修正するか

のいずれかを選択してください。バージョン管理を徹底し、reactとreact-domのバージョンを一致させることで、この種の問題はほとんど解消できます。