React项目执行npm start失败，依赖包无法解析问题求助

问题背景 #

几周前创建的React项目原本运行正常，执行npm start时出现大量依赖包无法解析的错误，涉及react-hot-toast、antd、@reduxjs/toolkit、react-dom/client等依赖。已尝试删除node_modules后重新安装依赖，但问题仍未解决，项目无法在浏览器中正常启动。

错误日志 #

Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src'
ERROR in ./src/App.js 13:0-42
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src'

ERROR in ./src/components/ProtectedRoute.js 7:0-36
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\components'

ERROR in ./src/components/StudentForm.js 6:0-38
Module not found: Error: Can't resolve 'antd' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\components'

ERROR in ./src/components/StudentForm.js 8:0-36
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\components'

ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src'

ERROR in ./src/index.js 7:0-32
Module not found: Error: Can't resolve 'antd/dist/antd.min.css' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src'    

ERROR in ./src/pages/employees/EmployeeHome.js 5:0-32
Module not found: Error: Can't resolve 'antd' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Login.js 5:0-35
Module not found: Error: Can't resolve 'antd' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Login.js 10:0-36
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Register.js 5:0-35
Module not found: Error: Can't resolve 'antd' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Register.js 10:0-36
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Students.js 8:0-29
Module not found: Error: Can't resolve 'antd' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/pages/employees/Students.js 10:0-36
Module not found: Error: Can't resolve 'react-hot-toast' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\pages\employees'

ERROR in ./src/redux/alerts.js 3:0-47
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\redux'

ERROR in ./src/redux/employees.js 3:0-47
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\redux'

ERROR in ./src/redux/store.js 4:0-50
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'C:\Users\USER\Desktop\MERN STACK PROJECT\STUDENTS RESULTS\client\src\redux'

排查与解决步骤 #

• 检查依赖声明完整性
  打开package.json，确认是否包含所有报错的依赖包。如果缺失，执行以下命令手动安装：

  npm install react-hot-toast antd @reduxjs/toolkit react-dom@latest
  

• 清理缓存并重新安装依赖
  缓存损坏可能导致依赖安装不完整，执行以下命令：

  npm cache clean --force
  # Windows系统执行：rmdir /s /q node_modules && del package-lock.json
  # macOS/Linux系统执行：rm -rf node_modules package-lock.json
  npm install
  

• 修复React版本兼容性问题
  react-dom/client是React 18新增API，若项目使用React 17及以下版本会报错，可二选一处理：

  1. 升级React到18：npm install react@latest react-dom@latest
  2. 修改index.js渲染逻辑为React 17兼容写法：

     import React from 'react';
     import ReactDOM from 'react-dom';
     import App from './App';
     
     ReactDOM.render(
       <React.StrictMode>
         <App />
       </React.StrictMode>,
       document.getElementById('root')
     );
     

• 修正Ant Design样式导入路径
  Ant Design v5不再支持antd/dist/antd.min.css全局导入，替换为：

  import 'antd/dist/reset.css';
  

• 调整项目路径
  项目路径包含空格或特殊字符（如STUDENTS RESULTS）可能导致Node模块解析异常，建议将项目移动到无空格的路径下，比如C:\Projects\student-results-client。

内容的提问来源于stack exchange，提问作者OGUNTADE EBENEZER