遇到 React 报错： Uncaught ReferenceError: require is not defined ，该如何解决？
当我们在使用 React 进行前端开发时，有时会遇到 Uncaught ReferenceError: require is not defined 报错。这个报错通常是由于使用了 CommonJS 的模块方式，而浏览器并不支持该语法所导致的。那么我们该如何解决这个问题呢？
解决方案
- 使用 ES6 模块
可以使用 ES6 模块来代替 CommonJS 模块，在浏览器中运行时，ES6 模块会被浏览器自动处理，无需额外的配置。
示例代码：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);需要注意的是，在使用 ES6 模块时，一定要在 script 标签中添加 type="module" 属性。
<script type="module" src="index.js"></script>
- 使用 Webpack 进行打包
除了使用 ES6 模块以外，我们还可以使用 Webpack 进行打包，将 CommonJS 模块转换为浏览器可以识别的代码。具体步骤如下：
- 安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
- 创建 webpack.config.js 文件
在项目根目录下创建 webpack.config.js 文件，并进行基本的配置。如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--这里的 entry 指定了入口文件，而 output 指定了输出文件的名称和路径。
- 修改代码
在原有的代码中，将 require 替换为 import。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);- 执行打包命令
npx webpack
执行完命令后，会在 dist 文件夹下生成 bundle.js 文件，然后我们只需要在 HTML 文件中引入该文件即可。
<script src="dist/bundle.js"></script>
总结
require is not defined 报错是由于浏览器不支持 CommonJS 的模块方式所导致的。解决该问题的方法有两种，一种是使用 ES6 模块，另一种是使用 Webpack 进行打包。以上两种方法都可以解决该问题，具体选择哪种方法，取决于项目实际情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1ecc0add4f0e0ffb1d9c1