45
rated 0 times
[
51]
[
6]
/ answers: 1 / hits: 21364
/ 8 Years ago, mon, march 28, 2016, 12:00:00
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:
Uncaught ReferenceError: require is not defined
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>
and my 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'));
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.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
More From » reactjs
