Flask和Reactjs拋出JSX變換錯誤

我已經開始在Python Flask後端使用ReactJS。Flask和Reactjs拋出JSX變換錯誤

當通過Flask呈現模板時，Chrome Console中出現以下客戶端錯誤。

Error: Cannot find module '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嗎？

感謝

UPDATE：

金record.js

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

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

來源

2014-12-22 Houman

該模塊應該在哪裏加載？你的客戶端代碼似乎並不顯示它是需要的。也就是說，JSX總是需要通過預編譯（用於生產/直播）或通過加載JSXtranformer和反應庫客戶端（用於開發測試）來進行轉換 –

我已經添加了更多關於JSX內容的細節。這應該有所幫助，但是如何解釋JSX錯誤消息？ – Houman

我已經找到了問題。

服務器上運行127.0.0.1:5000.

我不得不改變組件指向，而不是IP爲本地主機地址：

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

現在，它的工作原理。希望它可以幫助別人。

來源

2014-12-22 18:38:46 Houman

你可能只是做'/ search'，它會更加靈活。 – FakeRainBrigand

你有一個好點。 – Houman

Flask和Reactjs拋出JSX變換錯誤

回答

相關問題