React - 未捕获的ReferenceError：未定义require [英] React - Uncaught ReferenceError: require is not defined
问题描述
我正在制作一个简单的烧瓶应用程序，使用反应为前端的东西。现在我正在尝试从其他文件导入React组件，但没有成功。这是我得到的错误：
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
未捕获的ReferenceError：未定义require
这是我的html文件：
This is my html file:
<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 ，它位于同一个文件夹中：
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
有谁知道我做错了什么？
Does anyone know what am I doing wrong?
我没有使用任何软件包管理器。
I'm not using any package managers.
编辑
使用browserify解决了这个问题，如以下所说的。
感谢您的帮助
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
推荐答案
您需要使用诸如Rollup，Webpack或Browserify之类的东西。此声明从'./FormComponent.js'导入FormComponent; 并不代表客户端上的任何内容。没有任何浏览器原生支持它，所以你需要像上面提到的工具一样把它变成浏览器实际可以使用的东西。
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
如果没有它们，您只需加载index.html中的文件即可。
Without them you just have to load the files in your index.html.
这篇关于React - 未捕获的ReferenceError：未定义require的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
