reactjs - React.JS：ReferenceError：未定义要求

问题描述

刚开始学习 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-脚本。

这是我的目录结构：

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

标签： reactjs

reactjs - React.JS：ReferenceError：未定义要求

问题描述

解决方案

推荐阅读