Javascript ReactJS：“未捕获的语法错误：意外的标记 <”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28100644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: "Uncaught SyntaxError: Unexpected token <"
提问by kat
I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: "Uncaught SyntaxError: Unexpected token <".
我正在尝试开始在 ReactJS 中构建站点。然而，当我试图将我的 JS 放在一个单独的文件中时，我开始收到这个错误：“Uncaught SyntaxError: Unexpected token <”。
I tried adding /** @jsx React.DOM */to the top of the JS file, but it didn't fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong?
我尝试添加/** @jsx React.DOM */到 JS 文件的顶部，但它没有解决任何问题。下面是 HTML 和 JS 文件。关于出了什么问题的任何想法？
HTML
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
EDIT: I realized that I need to add type="text/jsx"to the script tag which includes my lander code. However, after adding this and reloading I get this warning
编辑：我意识到我需要添加type="text/jsx"到包含我的着陆器代码的脚本标签。但是，在添加并重新加载后，我收到此警告
"You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"
“您正在使用浏览器内的 JSX 转换器。请务必预编译您的 JSX 以进行生产 - http://facebook.github.io/react/docs/tooling-integration.html#jsx”
followed by this error:
接着是这个错误：
"XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource."
“XMLHttpRequest 无法加载 file:///Users/.../lander.js。跨源请求仅支持以下协议方案：http、data、chrome-extension、https、chrome-extension-resource。”
it seems like there is something else that I need to do in order to get in browser jsx transform working, but I'm not sure what it is.
似乎我还需要做一些其他事情才能使浏览器 jsx 转换正常工作，但我不确定它是什么。
EDIT: OOOOH do I need to host it using MAMP or something?
编辑：哦，我需要使用 MAMP 或其他东西来托管它吗？
回答by kat
UPDATE -- use this instead:
更新——改用这个：
<script type="text/babel" src="./lander.js"></script>
Add type="text/jsx"as an attribute of the scripttag used to include the JavaScript file that must be transformed by JSX Transformer, like that:
添加type="text/jsx"为script用于包含必须由 JSX Transformer 转换的 JavaScript 文件的标记的属性，如下所示：
<script type="text/jsx" src="./lander.js"></script>
Then you can use MAMP or some other service to host the page on localhost so that all of the inclusions work, as discussed here.
然后你可以使用甲基苯丙胺或一些其他服务托管的网页在本地主机上，这样所有的包裹的工作，为讨论在这里。
Thanks for all the help everyone!
谢谢各位的帮助！
回答by Pumych
JSTransform is deprecated, please use babel instead.
JSTransform 已弃用，请改用 babel。
<script type="text/babel" src="./lander.js"></script>
回答by NAVIN SINGH BISHT
Add type="text/babel"as an attribute of the script tag, like this:
添加type="text/babel"为脚本标记的属性，如下所示：
<script type="text/babel" src="./lander.js"></script>
回答by AlexGH
Add type="text/babel"to the script that includes the .jsx file and add this: <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
添加type="text/babel"到包含 .jsx 文件的脚本并添加以下内容： <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
回答by e18r
If you have something like
如果你有类似的东西
Uncaught SyntaxError: embedded: Unexpected token
You probably missed a comma in a place like this:
你可能在这样的地方漏掉了一个逗号：
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
}, // <---- DON'T FORGET THE COMMA
render: function() {
return (
<form className="commentForm">
<input type="text" placeholder="Nombre" />
<input type="text" placeholder="Qué opina" />
<input type="submit" value="Publicar" />
</form>
)
}
});
回答by stewart715
The code you have is correct. JSX code needs to be compiled to JS:
您拥有的代码是正确的。JSX代码需要编译成JS：
回答by Lord Darth Vader
If you are getting an error like this :
如果您收到这样的错误：
SyntaxError: embedded: Unexpected token (107:9) 105
语法错误：嵌入：意外令牌 (107:9) 105
It could be you are missing a curly bracket
可能是你缺少一个大括号
回答by prabhatojha
Try adding in webpack, it solved the similar issue in my project. Specially the "presets" part.
尝试添加 webpack，它解决了我项目中的类似问题。特别是“预设”部分。
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel',
query :{
presets:['react','es2015']
}
},
