React - Uncaught ReferenceError: require is not defined

Question

我正在制作一个简单的 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'));

最后是 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 - Uncaught ReferenceError: require is not defined

React - Uncaught ReferenceError: require is not defined

javascript

import

browserify

reactjs