React18.2.0使用JSX时出现'React must be in scope'报错求助

可能的原因及对应解决方案 #

1. ESLint插件版本不兼容 #

你使用的eslint-plugin-react版本可能过低，不支持React 17+的自动JSX转换特性。需要升级到最新版本：

• 执行命令：npm install eslint-plugin-react@latest --save-dev 或 yarn add eslint-plugin-react@latest --dev
• 升级后，在ESLint配置中确保以下规则被关闭：

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

2. Babel配置未启用自动JSX转换 #

React 17+的JSX自动转换依赖Babel的正确配置，需确认已开启automatic运行时：

• 在babel.config.json或.babelrc中添加如下配置：

  {
    "presets": [
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
  }
  

  这个配置会让Babel自动引入JSX所需的React runtime，无需手动导入React。

3. ESLint配置未正确加载 #

可能你的ESLint配置文件（如.eslintrc.json、.eslintrc.js）未被正确读取，或是存在多配置文件冲突。可以通过执行以下命令查看实际生效的规则：

npx eslint --print-config src/App.js

（将src/App.js替换为你的项目中任意JSX文件路径），确认react/react-in-jsx-scope是否确实被设置为off。

4. Create React App版本滞后 #

如果项目是用Create React App创建的，需确保react-scripts版本在4.0.0及以上（该版本开始支持React 17+的JSX自动转换）。升级命令：

• npm install react-scripts@latest --save 或 yarn add react-scripts@latest

5. 项目存在混合导入模式 #

若项目中部分文件仍保留import React from 'react'，另一部分未添加，可能导致ESLint检测异常。建议统一移除所有不必要的React导入，保持配置和代码风格一致。

内容的提问来源于stack exchange，提问作者David.E