如何避免在每个React文件中导入React？相关报错如何解决？

你遇到的报错核心原因是使用的react-scripts版本过低，不支持React 17引入的自动JSX转换特性。

React 17推出的「无需手动导入React」特性需要同时满足两个前提条件：

• React 版本 ≥ 17.0.0
• 项目构建工具支持新版JSX转换

你当前的react/react-dom版本已经符合要求，但react-scripts@1.1.5是很早的发布版本，远低于支持该特性的最低版本要求（react-scripts@4.0.0及以上才内置支持新版JSX转换）。同时如果项目ESLint规则开启了react/react-in-jsx-scope校验，也会抛出对应报错。

按以下步骤操作即可解决问题：

1. 升级react-scripts版本
   执行命令升级到符合要求的稳定版本：
   npm install react-scripts@^5.0.1
   如果升级过程中出现依赖冲突，可先删除项目根目录的node_modules文件夹和package-lock.json/yarn.lock文件后再重新执行安装命令。安装完成后重启开发服务。

2. 关闭冗余ESLint校验规则
   如果升级后仍有报错，在项目根目录的ESLint配置文件（.eslintrc、.eslintrc.js等）中添加如下规则：

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

配置完成后重启VSCode即可生效。

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