React - 未捕获的引用错误：require未定义。

Question

React - 未捕获的引用错误：require未定义。

14

我正在制作一个简单的Flask应用程序，使用React处理前端内容。目前我正在尝试从其他文件导入React组件，但没有成功。这是我遇到的错误：

Uncaught ReferenceError: require is not defined

这是我的HTML文件：

<html>
<head>
    <meta charset="UTF-8">
    <title>Index page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
    <div class="columns">
        <div class="column">
            some stuff
        </div>
        <div class="column">
            <div id="index"></div>
        </div>
    </div>
    <script type="text/babel" src="static/js/index.js"></script>
</body>
</html>

以及我的index.js文件：

import FormComponent from './FormComponent.js';

var MainClass = React.createClass({
  render:function(){
    return (
      <div>
        <div>this is the main component</div>
        <div><FormComponent /></div>
      </div>
    );
  }
});


ReactDOM.render(<MainClass />, document.getElementById('index'));

最后是在同一个文件夹中的FormComponent.js：

var FormComponent = React.createClass({

  render: function() {
    return (
        <div>this is an imported component</div>
    );
  }

});

module.exports = FormComponent;

有人知道我错在哪里吗？

我没有使用任何包管理器。

编辑
按照下面提到的方法，使用browserify解决了问题。感谢帮助。

- André Macedo

如果你使用Browserify或其他解决方案，require仅适用于前端客户端代码。浏览器没有本地的require定义。 - Akshat Mahajan

2个回答

-1

也许如果您尝试像第一个组件一样包含组件，但声明为text/javascript，应该可以运行。

我希望这可以解决您的问题。

- Arturo Castañeda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThrowsException · Accepted Answer

你需要使用类似Rollup、Webpack或Browserify的工具。这个语句import FormComponent from './FormComponent.js';在客户端上没有任何意义。没有一个浏览器原生支持它，因此你需要像上面提到的工具将其转换为浏览器可以真正使用的内容。

如果没有这些工具，你只能在index.html中加载文件。