遇到 React 报错： Uncaught ReferenceError: require is not defined ，该如何解决？-JavaScript中文网-JavaScript教程资源分享门户

遇到 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 文件，并进行基本的配置。如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

这里的 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