CodeMix/Eclipse运行React项目报错找不到'react/jsx-dev-runtime'问题求助

原因 #

CodeMix的Terminal+默认继承Eclipse启动时加载的系统环境变量，修改首选项不生效通常是因为Eclipse启动时未读取到新增的Node.js环境变量，或是Shell配置匹配错误。

解决步骤 #

• 完全关闭Eclipse，重启电脑确保系统层面的Node.js环境变量全局生效后，再重新打开Eclipse，不要直接在Eclipse内点重启
• 进入「窗口>首选项>Terminal+」配置页，找到你正在使用的Shell（Windows下通常为Cmd或PowerShell），在对应环境变量配置栏手动新增PATH变量，值追加你的Node.js安装路径（例如C:\Program Files\nodejs\）和npm全局包路径（例如C:\Users\你的用户名\AppData\Roaming\npm），保存后关闭所有已打开的终端，新开终端执行node -v验证
• 若仍不生效，右键Eclipse快捷方式选择「属性」，在「目标」字段末尾添加空格和-DPath=%PATH%;你的Node.js完整安装路径，保存后重新启动Eclipse

原因 #

react/jsx-dev-runtime是React 17及以上版本内置的运行时模块，存放在node_modules/react/目录下，不属于项目src目录的文件。报错通常由以下原因导致：

1. 项目安装的React版本低于17
2. react和react-scripts版本不匹配
3. 强制修复npm漏洞时破坏了依赖版本关联
   你之前安装的@types/react、@types/react-dom是TypeScript类型定义包，和该报错无关，不需要回退操作。

解决步骤 #

• 打开项目根目录的package.json文件，查看dependencies下的react、react-dom版本号：
  • 若版本低于17，执行npm install react@latest react-dom@latest --save升级
  • 若版本为17及以上，直接删除项目根目录的node_modules文件夹和package-lock.json文件，执行npm install重装所有依赖
• 若重装依赖后仍报错，执行npm install react-scripts@latest --save-dev单独升级脚手架版本
• 执行完成后重新运行react-scripts start即可正常启动

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