反应-未捕获的ReferenceError：require未定义

小编典典

反应-未捕获的ReferenceError：require未定义

reactjs

我正在制作一个简单的烧瓶应用程序，将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'));

最后是 FormCommponent.js ，它位于同一文件夹中：

var FormComponent = React.createClass({

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

});

module.exports = FormComponent;

有人知道我在做什么错吗？

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

编辑
通过使用browserify解决了该问题，如下所述。谢谢您的帮助

阅读 240

2020-07-22

共1个答案

小编典典

您需要使用汇总，Webpack或Browserify之类的东西。该语句import FormComponent from './FormComponent.js';对客户端没有任何意义。没有浏览器本身支持它，因此您需要类似上述工具的工具才能将其转换为浏览器可以实际使用的工具。

没有它们，您只需要将文件加载到index.html中。

2020-07-22