Question

刚开始学习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"));

JS

"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，并显示了背景，并且它们工作正常。我注意到，当我从我的JSX文件中删除以下内容后，添加React CDN时问题就消失了。

 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，但是我无法查明原因。

Answer 1

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

将this添加到您的项目

然后，看看this。

Answer 2

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

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

我去过Browserify，但也可以选择使用CDN。

React.JS：ReferenceError：需求未定义

2 个答案: