同构反应，意外令牌<答案

【问题标题】：Isomorphic react, unexpected token <同构反应，意外令牌<
【发布时间】：2016-06-06 02:26:28
【问题描述】：

我将我的应用程序重建为同构方法。在我的本地环境中一切正常（本地和在线节点版本相同）但不幸的是，将文件上传到我的网络服务器后，我收到以下错误消息：

SyntaxError: .../index.js: Unexpected token (74:62)
  72 |                       friends: friends
  73 |                     }
> 74 |                     var reactString = ReactDOM.renderToString(<IndexApp {...props}/>)
                                                                     ^

这直接指向<IndexApp..中的

我的需求清单如下：

var React = require('react')
var ReactDOM = require('react-dom/server')

var IndexApp = require('../public/js/build/components/IndexApp').default
var PostApp = require('../public/js/build/components/PostApp').default

我找不到任何合适的解决方案。我很乐意感谢任何提示。谢谢。

【问题讨论】：

标签： javascript node.js reactjs isomorphic-javascript

【解决方案1】：

您需要将 jsx 转换为 javascript。您可以使用 Babel 来做到这一点，例如

babel my-file.js --presets react -o output.js

【讨论】：

完全忘记了 :)

【解决方案2】：

这里有两个选项： 1）对于开发环境，您可以像这样包装jsx代码

<script type="text/babel" src="yourfile"/>

还包括browser.min.js 这将在您的浏览器中进行转译。

2) 对于 prod 环境，您需要先对其进行转译。您可以在本地机器上使用 babel 进行此操作

babel --presets es2015,react --minified financialFeed.js -o ./compiled/compiled.js

或者你可以去网上做

https://babeljs.io/repl/

【讨论】：

完全忘记了 babel

【解决方案3】：

为了让带有 JSX 的 Javascript 在浏览器中工作，必须首先对其进行转译。您可以在页面中通过包含 Babel 并将脚本类型更改为“text/babel”来执行此操作。首先，把这个放在页面的<head>：

<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

然后像这样包装你的包含 jsx 的 Javascript：

<script type="text/babel">
 ... code goes here ...
</script>

【讨论】：

哦，我忘了通天塔... :)