在使用 React 开发前端应用时，我们通常会使用 Webpack 进行打包，以便将代码转换为浏览器可识别的 JavaScript 代码。然而，在打包 React 项目时，有时会遇到这样一个错误：“'React' must be in scope when using JSX react/react-in-jsx-scope”。这篇文章将会详细介绍这个错误的原因以及解决方法，旨在帮助读者更好地理解 Webpack 和 React。
错误原因
在使用 JSX 语法时，我们需要在代码中引入 React 库。例如：
import React from 'react';
function App() {
return <h1>Hello, World!</h1>;
}
export default App;然而，当我们在 Webpack 中配置了 resolve.alias，将 react 重命名为 _react 时，就会出现上述错误：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
-------- -
------ -
------ --------
-
-
--这是因为 Webpack 中的 resolve.alias 会将所有的 import 语句中的 react 替换为 _react，导致在代码中无法找到 React。
解决方法
为了解决这个问题，我们需要在 Webpack 中添加一个新的配置项，即 resolve.alias 的反向映射。这个配置项将 _react 映射回 react，从而使得 import 语句中的 react 能够被正确解析。例如：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
-------- -
------ -
------ --------
--
----------- ------- --------
-------- -----------------
--------- -
-------- -------------------------
--------- ------------------------
-
-
--注意，我们需要将 fallback 设置为一个对象，并将其初始化为一个空对象，然后在其中添加 react 和 _react 的映射。这样做是因为 fallback 可能已经被其他插件或配置项修改过了，我们需要将原有的映射保留下来。
示例代码
下面是一个完整的 Webpack 配置文件，包含了上述的解决方法：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ ------------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
--
-------- -
------ -
------ --------
--
----------- ------- --------
-------- -----------------
--------- -
-------- -------------------------
--------- ------------------------
-
-
--总结
在使用 Webpack 打包 React 项目时，我们可能会遇到 “'React' must be in scope when using JSX react/react-in-jsx-scope” 错误。这个错误是由于 Webpack 中的 resolve.alias 配置项导致的。为了解决这个问题，我们需要添加一个新的配置项 resolve.fallback，将 _react 映射回 react。这篇文章介绍了这个错误的原因以及解决方法，并提供了示例代码。希望这篇文章能够帮助读者更好地理解 Webpack 和 React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65efc8ba2b3ccec22f910ce0