Flask 和 Reactjs 抛出 JSX Transform 错误答案

【问题标题】：Flask and Reactjs throw JSX Transform errorFlask 和 Reactjs 抛出 JSX Transform 错误
【发布时间】：2014-12-22 17:02:34
【问题描述】：

我已经开始使用带有 Python Flask 后端的 ReactJS。

通过 Flask 呈现模板时，我在 Chrome 控制台中收到以下客户端错误。

错误：找不到模块 'jstransform/visitors/es6-templates-visitors'

服务器：

@app.route("/")
def start():
    return render_template('index.html')

客户： 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>

为什么这会导致问题，每个文件似乎都在静态中找到。为什么 JSX 失败了？我必须先将 JSX 编译成 Javascript 吗？

谢谢

更新：

golden-record.js

var SearchBox = React.createClass({...});

React.render(
    <SearchBox url="http://localhost:5000"/>,
    document.getElementById('content')
);

【问题讨论】：

该模块应该加载到哪里？您的客户端代码似乎没有显示需要它。也就是说，是的，JSX 总是需要通过预编译（用于生产/实时）或通过将 JSXtransformer 与反应库客户端加载（用于开发测试）进行转换
我添加了有关 JSX 内容的更多详细信息。这应该会有所帮助，但是您如何解释 JSX 错误消息？

标签： javascript python reactjs

【解决方案1】：

我发现了问题。

服务器运行在127.0.0.1:5000.

我必须将组件更改为指向 IP 地址而不是本地主机：

React.render(
    <SearchBox url="http://127.0.0.1:5000/search"/>,
    document.getElementById('content')
);

现在可以了。希望它可以帮助别人。

【讨论】：

你可以只做/search，它会更灵活。