同构反应，意外令牌

Question

I rebuilt my application to an isomorphic approach. 我将应用程序重建为同构方法。 Everything worked fine on my local enviroment (node version local and online is the same) But unfortunately after uploading the files to my webserver I get the following error message: 在我的本地环境上一切正常（节点版本本地和在线相同），但是不幸的是，将文件上传到我的网络服务器后，我收到以下错误消息：

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

This directly points to the < in <IndexApp.. 这直接指向<IndexApp..中的<IndexApp..

My requirement list looks as following: 我的需求列表如下：

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

I can't find any proper solution to that. 我找不到任何适当的解决方案。 I gladly appreciate any hints. 我很高兴得到任何提示。 Thank you. 谢谢。

Answer 1

You need to transpile the jsx to javascript. 您需要将jsx转换为javascript。 You can do that with Babel , something like 您可以使用Babel来完成此操作，例如

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

Answer 2

There are two options here : 1)For dev environment you can wrap jsx code like this 这里有两个选择：1）对于开发环境，您可以像这样包装jsx代码

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

and also include browser.min.js This will be transpiled in your browser. 并包括browser.min.js它将在您的浏览器中转译。

2)For prod environment you need to transpile it first .You can do this on your local machine using babel 2）对于产品环境，您需要先进行翻译。您可以使用babel在本地计算机上进行翻译

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

or you can do it online by going to 或者您可以通过以下方式在线进行操作：

https://babeljs.io/repl/

Answer 3

In order for Javascript with JSX to work in the browser, it has to be transpiled first. 为了使带有JSX的Javascript在浏览器中运行，必须首先对其进行编译。 You can do that within the page by including Babel and changing the script type to 'text/babel'. 您可以在页面中通过添加Babel并将脚本类型更改为'text / babel'来实现。 First, put this in the <head> of the page: 首先，将其放在页面的<head>中：

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

And then wrap your jsx-containing Javascript like this: 然后像这样包装您的包含jsx的Javascript：

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

同构反应，意外令牌

问题描述

3 个解决方案

解决方案1
2 2016-06-05 18:04:52

解决方案2
2 2016-06-05 18:26:28

解决方案3
0 已采纳 2016-06-05 18:09:19

同构反应，意外令牌

问题描述

3 个解决方案

解决方案1 2 2016-06-05 18:04:52

解决方案2 2 2016-06-05 18:26:28

解决方案3 0 已采纳 2016-06-05 18:09:19

解决方案1
2 2016-06-05 18:04:52

解决方案2
2 2016-06-05 18:26:28

解决方案3
0 已采纳 2016-06-05 18:09:19