终端提示'React'必须在JSX作用域内的React编译失败问题咨询

问题根源 #

JSX语法编译时会被转换成React.createElement()调用，所以React必须处于当前组件的作用域内才能正常编译。如果是React 17及以上版本，官方已更新JSX转换规则，无需显式导入React，但旧ESLint配置可能仍会触发该错误。

解决方案 #

1. React 17之前的版本 #

在使用JSX的组件文件顶部，必须显式导入React：

import React from 'react';

function AboutView() {
  return <div>About Page</div>;
}

export default AboutView;

注意导入的变量名必须是大写的React，小写会导致识别失败。

2. React 17及以后的版本 #

如果项目用了React 17+但ESLint仍报错，按以下步骤处理：

• 升级eslint-plugin-react到最新版本：

npm install eslint-plugin-react@latest --save-dev

• 在ESLint配置文件（如.eslintrc.js、.eslintrc.json）中关闭该规则：

module.exports = {
  // 其他配置...
  rules: {
    'react/react-in-jsx-scope': 'off'
  }
};

如果用TypeScript，需确保tsconfig.json中的jsx字段设置为react-jsx或react-jsxdev，对应新的JSX转换：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

额外检查点 #

• 确认组件文件的导入语句无拼写错误，比如把React写成小写的react
• 执行npm list react查看项目依赖中的React版本，确认版本匹配解决方案

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