ReactJS：未捕获的 ReferenceError：未定义要求答案

【问题标题】：ReactJS: Uncaught ReferenceError: require is not definedReactJS：未捕获的 ReferenceError：未定义要求
【发布时间】：2016-07-06 08:19:41
【问题描述】：

我正在尝试在 React JS 中使用 DRY。我正在尝试在不同的文件中使用相同的 HTML 部分

部分：

var AdminMenu = React.createClass({
 getInitialState: function() {
   return {};
 },
 render: function() {
   return (
     <h1>Menu</h1>
   );
 }
});

我在另一个文件中要求它：

require('./scripts/adminMenu.js');

ReactDOM.render(
 <AdminMenu/>,
 document.getElementById('content')
);

但我收到一个错误：

Uncaught ReferenceError: require is not defined

此脚本包含在 html 页面中，例如： <script type="text/babel" src="scripts/admin.js"></script>

我正在使用 webpack

【问题讨论】：

您使用的是哪个打包器/构建器？
您的代码看起来有问题，您需要 adminMenu，但您没有分配它。您为什么不使用 ES 导入/导出？你检查过 webpack.config.js 的 React 最佳实践吗？
你也没有导出AdminMenu你知道模块是如何工作的吗？
@webdeb 但我正在分配 AdminMenu 就像 var AdminMenu = ...
我明白了，但你没有导出它

标签： javascript reactjs

【解决方案1】：

如果您没有使用任何模块捆绑器，例如 webpack 等。您应该将组件分配给一些 javascript 全局对象，因为来自 .jsx 的对象没有放在全局范围内

所以这是解决方案（这里使用 window 对象）

定义模块：

window.AdminMenu = React.createClass({
  getInitialState: function() {
    return {};
  },
  render: function() {
    return (
      <h1>Menu</h1>
    );
  }
});

你在哪里使用它：

ReactDOM.render(
  <window.AdminMenu/>,
  document.getElementById('content')
);

【讨论】：

您说：“如果您没有使用任何模块捆绑器，例如 webpack 等”。 "etc" 中是否包含 "grunt" 我正在使用 grunt 来捆绑我的 js。我仍然收到此错误。

【解决方案2】：

你必须使用

const { Component } = React;
const { render } = ReactDOM;

代替

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

【讨论】：

【解决方案3】：

考虑使用 ES6 模块而不是 React 中的 require

导出一个模块：

// src/hello.js
// export as default
export default const hello = ({name}) => (
  <h1>Hello {name}</h1>
)

导入一个模块：

// src/index.js
// import from relative directory (src)
import Hello from './hello'

const App = () => {
  return (
    <div>
      <Hello name="Pavel" />
    </div>
  )
}

【讨论】：

const 出现错误：browser.js:2027 Uncaught SyntaxError: Unexpected token (1:15)
没有const 得到错误：VM1842:4 Uncaught ReferenceError: exports is not defined
当然，因为它不是复制粘贴代码，你应该设置webpack支持es6
要启动并运行它，需要一个简单的样板，然后检查它的作用...github.com/srn/react-webpack-boilerplate
谁能帮帮我：- stackoverflow.com/questions/60466549/…

【解决方案4】：

您应该在此处阅读有关模块的更多信息：https://www.sitepoint.com/understanding-es6-modules/

您现有代码中的主要问题是：

看起来，尽管您使用的是 Webpack，但您使用它的方式是错误的。在您的最终捆绑包（最终 JS 文件）中，它不应包含任何“需要”关键字。你在你的 webpack 中使用过 Babel 吗？请向我们展示您的 WebPack 配置。
您的 AdminMenu 文件看起来不像模块。您的 adminMenu 文件应包含“export”关键字，之后您将能够从其他文件中“要求”或“导入”它。

另外，如果你更方便的话，你可以用俄语在 cmets 中写问题

【讨论】：