React 模块解析错误：无法解析 'react-dom/client'

问题描述

在使用 React 进行开发时，您可能会遇到以下错误信息：

ERROR in ./src/index.js 5:0-40

Module not found: Error: Can't resolve 'react-dom/client' in '/your-project/src'

这个问题通常出现在您的代码试图使用 React 18 的新 API，但实际安装的是 React 17 或更早版本的情况下。

问题原因分析

查看提供的 package.json 文件：

{
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

虽然 index.js 中使用了 React 18 的 API：

import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));

但实际安装的是 React 17，而这个版本并不包含 react-dom/client 模块，从而导致模块解析失败。

解决方案

方案一：升级到 React 18（推荐）

1. 修改 package.json：

   {
     "dependencies": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
   }

2. 清理并重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install

3. 使用正确的导入方式：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );

方案二：降级代码以兼容 React 17

如果您暂时不想升级 React 版本，可以修改代码以兼容 React 17：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

TypeScript 项目注意事项

对于 TypeScript 项目，您需要同时更新类型定义：

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

常见陷阱和排查步骤

注意

确保 package.json 中的 react 和 react-dom 版本保持一致，避免混合使用不同主版本。

1. 检查实际安装的版本：

   npm list react --depth=0
   npm list react-dom --depth=0

2. 确保使用 npm install 更新依赖：

   npm install

3. 清理缓存：

   npm cache clean --force

版本兼容性参考

React 版本	导入方式	渲染方法
React 17	import ReactDOM from 'react-dom'	ReactDOM.render()
React 18	import ReactDOM from 'react-dom/client'	ReactDOM.createRoot().render()

总结

Module not found: Error: Can't resolve 'react-dom/client' 错误通常是由于 React 版本与代码使用的 API 不匹配导致的。解决方案包括：

1. 升级 React 和 ReactDOM 到 18+ 版本
2. 或者修改代码以兼容 React 17
3. 确保使用正确的导入和渲染方式

建议根据项目需求选择合适的解决方案，并确保依赖版本的一致性。