React简易项目编译报错：Module not found错误求助

错误本质 #

这个报错是因为React与ReactDOM版本不匹配，或是项目依赖包存在损坏/缺失，导致模块路径解析失败。React 18及以后版本的导出结构有调整，旧写法或版本不一致容易触发这类异常。

修复步骤 #

• 统一React与ReactDOM版本：打开项目根目录的package.json，确认react和react-dom版本号一致，比如均为18.x.x或17.x.x。若不一致，执行命令统一版本（以安装最新版为例）：

  npm install react@latest react-dom@latest
  

• 适配React 18的渲染写法（若使用React 18）：旧的ReactDOM.render写法在部分环境下会触发路径解析异常，改为官方推荐的新写法：
  原代码：

  import React from "react";
  import ReactDOM from "react-dom";
  const root = ReactDOM.render(<h1>Hello World!</h1>,document.getElementById("root"));
  

  修改后：

  import React from "react";
  import ReactDOM from "react-dom/client";
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<h1>Hello World!</h1>);
  

• 清理缓存并重装依赖：避免缓存或损坏的依赖包导致问题：

  rm -rf node_modules package-lock.json
  npm install
  

验证 #

执行npm start重启项目，若编译成功则问题解决。

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