同构反应，意想不到的令牌 <

Question

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

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

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

Answer 1

您需要将 jsx 转译为 javascript。你可以用 Babel 来做到这一点，比如

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

Answer 2

为了 Javascript 和 JSX 在浏览器中工作，它必须首先被转译。您可以通过包含 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>

Answer 3

这里有两个选项： 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/

同构反应，意想不到的令牌 <

Isomorphic react, unexpected token <

javascript

node.js

reactjs

isomorphic-javascript