Reactプロジェクトを進めていると、突然「Module not found Error: Can’t resolve ‘react-dom/client’」というエラーメッセージに遭遇することがあります。このエラーは、特にReactのバージョンや依存関係が関係していることが多いです。この記事では、このエラーの原因と解決方法について詳しく説明します。
・エラーの原因
このエラーは、通常、以下の理由で発生します。
① Reactのバージョンの不一致: react-dom/clientモジュールはReact 18以降で導入されました。そのため、Reactのバージョンが18未満の場合、このモジュールを見つけることができず、エラーが発生します。
② 依存関係のインストールミス: プロジェクトに必要な依存関係が正しくインストールされていない場合も、このエラーが発生します。
・Reactのバージョンを確認する
まず、Reactのバージョンを確認します。package.jsonファイルを開き、ReactとReactDOMのバージョンをチェックしてください。
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}もしReact 18未満のバージョンが指定されている場合は、次のコマンドを使ってアップグレードします。
npm install react@latest react-dom@latestまたは、yarnを使用している場合は次のように実行します。
yarn add react@latest react-dom@latest・依存関係を再インストールする
依存関係が正しくインストールされていない場合、再インストールを試みます。まず、node_modulesディレクトリとpackage-lock.jsonまたはyarn.lockファイルを削除します。
rm -rf node_modules package-lock.json yarn.lockその後、以下のコマンドを実行して依存関係を再インストールします。
npm installまたは、yarnを使用している場合は次のように実行します。
yarn install・importステートメントを確認する
React 18以降では、react-domのエントリポイントが変更されました。react-dom/clientからインポートするようにしてください。
import { createRoot } from 'react-dom/client';これに対し、React 17以前のバージョンでは次のようにインポートしていました。
import ReactDOM from 'react-dom';React 18以上を使用している場合は、新しい方法でインポートするようにコードを更新しましょう。
・まとめ
「Module not found Error: Can’t resolve ‘react-dom/client’」は、主にReactのバージョンや依存関係の問題によって発生します。この記事で紹介した手順に従って、バージョンを確認し、依存関係を再インストールし、適切なインポートステートメントを使用することで、このエラーを解消することができます。正しいバージョン管理と依存関係のチェックを怠らず、スムーズな開発環境を維持しましょう。
