React 18升级后出现Unable to resolve path to module 'react-dom/client'警告求助

以下是几个可行的解决方案，按优先级尝试：

1. 安装/升级@types/react-dom至对应版本 #

你当前仅指定了@types/react的版本，但react-dom的类型定义可能未安装或版本不匹配，导致TypeScript/ESLint无法识别react-dom/client路径。执行以下命令安装对应版本：

npm install @types/react-dom@^18.2.0 --save-dev
# 或使用yarn
yarn add @types/react-dom@^18.2.0 --dev

2. 检查ESLint模块解析配置（若使用eslint-plugin-import） #

如果项目使用eslint-plugin-import，需在ESLint配置文件（如.eslintrc.js）中确保模块解析器能正确识别Node.js模块：

module.exports = {
  // ...其他配置
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        moduleDirectory: ['node_modules', 'src/']
      }
    }
  }
};

3. 调整TypeScript的tsconfig.json配置 #

• 确保moduleResolution设置为Node16、NodeNext或Node（React 18的react-dom/client采用ES模块结构，需要正确的模块解析策略）：

{
  "compilerOptions": {
    // ...其他配置
    "moduleResolution": "Node16"
  }
}

• 检查include字段是否包含源码目录（如src/**/*），确保TypeScript能处理index.tsx文件：

{
  "include": ["src/**/*"]
}

• 若配置了paths字段，确认没有错误映射react-dom路径，避免覆盖官方模块位置。

4. 清除缓存并重新安装依赖 #

缓存异常可能导致模块解析错误，执行以下步骤：

• 删除node_modules目录和锁文件（package-lock.json或yarn.lock）
• 重新安装依赖：npm install或yarn install
• 清除TypeScript缓存：删除tsconfig.tsbuildinfo（如果存在）
• 重启编辑器并清除工作区缓存

内容的提问来源于stack exchange，提问作者Vyacheslav Fedorin