Question

我正在制作一个简单的烧瓶应用程序，使用反应为前端的东西。现在我正在尝试从其他文件导入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解决了这个问题，如下所述。谢谢你的帮助

Answer 1

您需要使用诸如Rollup，Webpack或Browserify之类的东西。此声明import FormComponent from './FormComponent.js';对客户端没有任何意义。没有浏览器原生支持它，所以你需要像上面提到的工具一样把它变成浏览器实际可以使用的东西。

没有它们，您只需加载index.html中的文件即可。

Answer 2

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

希望这能解决您的问题

React - 未捕获的ReferenceError：未定义require

2 个答案: