React.JS：ReferenceError：未定义要求[重复]答案

【问题标题】：React.JS: ReferenceError: require is not defined [duplicate]React.JS：ReferenceError：未定义要求[重复]
【发布时间】：2019-07-17 08:12:11
【问题描述】：

刚开始学习 React，我正在学习

ReferenceError: require is not defined 
<anonymous>http://localhost:3000/js/script.js:3:5

在控制台日志中。

这是我的 JSX：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h2>Testing</h2>;
ReactDOM.render(element, document.getElementById("test"));

"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var element = _react.default.createElement("h2", null, "Testing");

_reactDom.default.render(element, document.getElementById("test"));

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>
    <section id="content">
        <section id="test"></section>
    <script src="/js/script.js"></script>
</body>

</html>

我已经让 Babel 和 Gulp 以及后台运行，它们工作正常。我注意到当我添加 React CDN 时，从我的 JSX 文件中删除以下内容后，问题就消失了。

 import React from 'react';
 import ReactDOM from 'react-dom';

我没有使用 npx create-react-app my-app 命令，因为这是我已经在做的一个项目，而是我只是安装了 Babel，配置它，将它添加到 Gulp，安装了 react、react-dom 和 react-scripts。

这是我的目录结构：

|   .babelrc
|   .gitignore
|   .pug-lintrc.json
|   .sass-lint.yml
|   gulpfile.js
|   package-lock.json
|   package.json
|   
||||css
|       style.css
|       
||||html
|       index.html
|       
||||js
|       script.js
|       
||||jsx
|       script.jsx
|       
||||node_modules

使用CDN对我来说没有问题，但我只是想知道我在这里做错了什么。我猜我没有从 'react' 正确导入 React，但我无法查明原因。

【问题讨论】：

我想这是因为require 是一个节点的东西，这是在浏览器上？你可以像在 JSX 文件中那样导入它，然后通过 interop 函数运行它。

标签： reactjs

【解决方案1】：

RequireJS 是一个 JavaScript 文件和模块加载器。它针对浏览器内使用进行了优化，但也可以在其他 JavaScript 环境中使用，例如 Rhino 和 Node。使用像 RequireJS 这样的模块化脚本加载器将提高代码的速度和质量。兼容几乎所有最新的浏览器。

将this 添加到您的项目中

那么，看看this。

【讨论】：

【解决方案2】：

Bhojendra Rauniyar 和 Jonny Rathbone 为我指明了正确的方向。 Require 是 Node.JS 的一部分，您的浏览器本身并不支持它。

要启用它，您需要使用此处提到的选项之一： Client on node: Uncaught ReferenceError: require is not defined

我选择了 Browserify，但使用 CDN 也是一种选择。

【讨论】：