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

【问题标题】：React - Uncaught ReferenceError: require is not definedReact - 未捕获的 ReferenceError：未定义要求
【发布时间】：2016-03-28 03:12:29
【问题描述】：

我正在制作一个简单的烧瓶应用程序，将 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解决了这个问题，如下所述。感谢您的帮助

【问题讨论】：

如果您使用的是 Browserify 或其他解决方案，require 仅适用于前端客户端代码。浏览器没有原生的require 定义。

标签： javascript reactjs import browserify

【解决方案1】：

您需要使用 Rollup、Webpack 或 Browserify 之类的东西。这个声明import FormComponent from './FormComponent.js'; 对客户端没有任何意义。没有浏览器本身支持它，所以你需要上面提到的工具来将它变成浏览器可以实际使用的东西。

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

【讨论】：

browerify handbook 开头很好地解释了为什么对于那些不了解这一切的人来说这是必要的。
这个答案是四年前的。原生支持落地了吗？

【解决方案2】：

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

希望能解决你的问题

【讨论】：