如何修复 “React Must Be in Scope When Using JSX” 错误

使用 React 有时会很棘手，尤其是在处理不容易理解的错误时。

开发人员可能会遇到的一个常见错误是 “React must be in scope when using JSX” 错误。如果在使用 JSX 语法的组件中没有正确导入或初始化 React，就会出现这种错误。

在本文中，我们将讨论导致该错误的原因，并提供如何修复该错误的解决方案。

“React must be in scope when using JSX” 错误的原因是什么？

JSX（JavaScript XML）是一种语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。浏览器不理解 JSX，但像 Create React App 这样的预配置工具包在引擎盖下包含了一个 JSX 转换工具，可以将 JSX 代码转换为有效的 JavaScript 代码，浏览器可以解释这些代码。

在 17.0 之前的 React 版本中，JSX 转换器会在编译时将 JSX 转换为 React.createElement() 函数调用。这需要导入 React 才能使用 React 元素。在 React v17.0 中引入了新的 JSX 转换后，React 包的新入口点中的特殊函数将被自动导入，从而无需在每个显式使用 JSX 的文件中导入 React。

举例来说，让我们来看看下面的功能组件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

在编译时，它会被转换成普通的 JavaScript：

function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

由于 React 是未定义的，因此在使用 jsx 时总会出现 “‘react’ must be in scope when using jsx” 的错误。

修复 “react must be in scope when using jsx” 错误的 2 种方法

根据您使用的 React 版本，有几种方法可以修复此错误。

• React v17 之前历史版本
• React v17 及更高版本

1. 包含或更正 React 导入声明（针对 React v17 之前版本的修复）

如果您使用的是旧版本的 React，则可能缺少 “react” 的导入语句或导入语句不正确。请确保文件顶部有正确的导入语句（”React” 上有大写的 “R”）：

// Wrong ❌
import react  from 'react';
// Correct ✅
import React  from 'react';

将功能组件转换为普通 JavaScript 后，就会变成这样：

import React  from 'react';
function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

2. 更新 ESLint 配置（针对 React v17 及更高版本的修复）

在 React v17.0 中，引入了新的 JSX 转换，它会自动从 React 包的新入口导入特殊函数，从而无需在每个显式使用 JSX 的文件中导入 React。

例如，下面是一个功能组件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

这就是新的 JSX 转换编译成的内容：

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Welcome to WBOLT!' });
}

这意味着您不再需要在组件中导入 React 以使用 JSX。如果您在检查 package.json 文件以确认 React 版本后仍然收到此错误，则必须更新 ESLint 配置。

在这个阶段，从技术上讲，这不再是 React 错误，而是 ESLint 错误。

注：您经常会在 React 项目中使用 ESLint 等线程工具，因为它会检查您的代码以检测潜在的错误，这些错误可能会在现在或将来破坏您的代码。该工具会在检测到文件周围有任何 JSX 时强制您导入 React。

如果您确定自己的 React 版本是 v17.0 或更高，那么就可以安全地禁用确保您在 React 中使用 JSX 时导入 React 的规则。

更新 ESLint 配置有两种主要方式。如果你有 .eslintrc.js 或 .eslintrc.json 文件。在 .eslintrc.js 文件中添加以下规则。

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

否则，你可以更新 package.json 文件中的 eslintConfig 对象：

{
"name": "quotes-circle",
// ...
"dependencies": {
// ...
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
},
}

在上面的代码中，react-in-jsx-scope 规则已关闭，因此 ESLint 不会在你导入 React 失败时抛出错误。

至此，你应该已经彻底解决了 “‘react’ must be in scope when using jsx” 的错误。但也有可能因为某些原因，错误仍然存在。

让我们再看看几种修复方法。

修复 “react must be in scope when using jsx” 错误的其他 3 种方法

假设错误仍然存在。以下是解决 “‘react’ must be in scope when using jsx” 错误的另外三种方法。

1. 更新 React-Scripts 的版本

在终端运行以下命令即可更新项目的 react-scripts 版本：

// npm
npm install react-scripts@latest
// yarn
yarn add react-scripts@latest

2. 删除 Node_modules 文件夹和 package-lock.json 文件

如果错误仍然存在，则可能是某些依赖项安装错误。你可以删除 node_modules 文件夹和 package-lock.json 文件（不是 package.json）来解决这个问题。然后运行以下命令重新安装软件包：

npm install

然后重启开发服务器。

3. 更新 React 和 React-Dom 的版本

最后，如果错误仍然存在，请使用下面的命令更新 react 和 react-dom 的版本：

// npm
npm install react@latest react-dom@latest
// if you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest
// OR
// Yarn
yarn add react@latest react-dom@latest
// if you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

目前可以肯定的是，这一错误将得到修复。

小结

“React must be in scope when using JSX” 错误是开发人员在使用 React 时可能遇到的常见问题。当文件中使用了 JSX 语法，但未正确导入或包含 React 库时，此错误主要发生在 React v17 的早期版本中。在 React v17 的较高版本中，当 ESLint 配置出错或 node_modules 文件夹中的某些依赖项安装错误时，也会出现该错误。

根据您正在使用的 React 版本，您可以使用不同的方法来修复此错误，我们在文章中对此进行了概述。

现在轮到你了： 您遇到过这个问题吗？你是如何解决的？你还使用过本文未涉及的其他方法吗？请在评论中告诉我们！