Cannot find module 'react-dom/client' エラーの解決方法

問題の概要

Reactアプリケーションでテストを実行する際に、次のようなエラーが発生することがあります：

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js

このエラーは、npm test コマンド実行時に発生し、Reactのテスト環境における依存関係の互換性の問題を示しています。

根本原因

このエラーの主な原因は、@testing-library/react v13以上とReact 17以下のバージョン互換性の問題です。

バージョン互換性の問題

@testing-library/reactのv13からはReact 18以降が必須となり、React 17以前との互換性が失われています。

提供されたpackage.jsonから確認できるように：

• React: ^17.0.2
• @testing-library/react: 13.0.0

この組み合わせが互換性の問題を引き起こしています。

解決方法

方法1: @testing-library/reactをダウングレードする（推奨）

React 17を引き続き使用する場合、@testing-library/reactをv12系にダウングレードします：

npm install @testing-library/react@12.1.5 --save-dev

方法2: Reactをv18にアップグレードする

プロジェクト全体をReact 18にアップグレードする場合：

npm install react@18 react-dom@18

また、他の関連パッケージもアップグレードが必要になる場合があります：

npm update --legacy-peer-deps

方法3: 依存関係を完全に更新する

すべての依存関係を最新バージョンに更新する場合：

# node_modulesを削除
rm -rf node_modules

# パッケージ再インストール
npm install

# 強制更新
npm update --force

# 型定義ファイルの更新（TypeScript使用時）
npm install --save-dev @types/react@latest @types/react-dom@latest

注意点

--legacy-peer-deps フラグは、peer dependenciesのエラーを無視してインストールを強制実行します。一時的な解決策として有用ですが、根本的な互換性問題が解決されるわけではありません。

推奨される設定

現在のベストプラクティスに基づく推奨バージョン組み合わせ：

React 17を使用する場合

{
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "@testing-library/react": "^12.1.5"
}

React 18を使用する場合

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0", 
  "@testing-library/react": "^13.0.0"
}

補足情報

この問題は、React 18で導入された新しいクライアントAPI（react-dom/client）が原因で発生します。React 17以前にはこのモジュールが存在しないため、@testing-library/react v13がこれを参照しようとするとエラーが発生します。

背景

React 18では、アプリケーションのレンダリング方法が変更され、ReactDOM.render() の代わりに ReactDOM.createRoot() が使用されるようになりました。この変更がテストライブラリにも影響を与えています。

まとめ

Cannot find module 'react-dom/client' エラーは、主に以下のいずれかの方法で解決できます：

1. @testing-library/reactをv12系にダウングレード（React 17継続時）
2. Reactをv18にアップグレード（最新機能が必要な場合）
3. 依存関係全体を更新（プロジェクト全体を最新化する場合）

プロジェクトの要件に応じて適切な解決方法を選択してください。既存の大規模プロジェクトでは方法1を、新規プロジェクトでは方法2を推奨します。