Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flask and Reactjs throw JSX Transform error

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')
);
like image 390
Houman Avatar asked Sep 30 '22 03:09

Houman


1 Answers

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.

like image 180
Houman Avatar answered Oct 01 '22 20:10

Houman