I have started using ReactJS with a Python Flask Backend.
I get the following client error in Chrome Console, when rendering the template via Flask.
Error: Cannot find module 'jstransform/visitors/es6-templates-visitors'
Server:
@app.route("/")
def start():
return render_template('index.html')
Client: index.html
<html lang="en">
<head>
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/jquery-1.11.2.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/react.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/JSXTransformer.js') }}"></script>
<script src="{{ url_for('static', filename='js/showdown.js') }}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="content"></div>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"></script>
<script type="text/jsx" src="{{ url_for('static', filename='js/golden-record.js') }}"></script>
</body>
</html>
Why is this causing a problem, each file seems to be found within static. Why is JSX failing? Do I have to compile the JSX into Javascript first?
Thanks
UPDATE:
golden-record.js
var SearchBox = React.createClass({...});
React.render(
<SearchBox url="http://localhost:5000"/>,
document.getElementById('content')
);
I have found the problem.
The server runs on 127.0.0.1:5000.
I had to change the Component to point to IP address instead of Localhost:
React.render(
<SearchBox url="http://127.0.0.1:5000/search"/>,
document.getElementById('content')
);
Now it works. Hope it helps someone else.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With