ReactJS：“未捕获的语法错误：意外的令牌 <”答案

【问题标题】：ReactJS: "Uncaught SyntaxError: Unexpected token <"ReactJS：“未捕获的语法错误：意外的令牌 <”
【发布时间】：2015-03-21 22:41:32
【问题描述】：

我正在尝试开始在 ReactJS 中构建网站。但是，当我尝试将我的 JS 放在单独的文件中时，我开始收到此错误：“Uncaught SyntaxError: Unexpected token

我尝试将/** @jsx React.DOM */ 添加到 JS 文件的顶部，但没有解决任何问题。下面是 HTML 和 JS 文件。关于出了什么问题的任何想法？

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

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

编辑：我意识到我需要将type="text/jsx" 添加到包含我的着陆器代码的脚本标签中。但是，在添加此内容并重新加载后，我收到此警告

"您正在使用浏览器内的 JSX 转换器。请务必预编译您的 JSX 以用于生产 - http://facebook.github.io/react/docs/tooling-integration.html#jsx"

随后出现此错误：

"XMLHttpRequest 无法加载 file:///Users/.../lander.js。跨域请求仅支持协议方案：http、data、chrome-extension、https、chrome-extension-resource。"

似乎我还需要做一些其他事情才能让浏览器 jsx 转换正常工作，但我不确定它是什么。

编辑：哦，我需要使用 MAMP 或其他东西来托管它吗？

【问题讨论】：

你是如何包含你的“JS”文件的？
您需要额外添加以下脚本代码。
2019 年更新：将 type="text/babel" 添加到我正在导入我的 JS 文件的脚本标记中，@Steven 在上面的评论中提到的 Babel 脚本对我有用。

标签： javascript html reactjs react-jsx

【解决方案1】：

就我而言，使用src="./<file>.js" 不起作用。使用 %PUBLIC_URL% 就可以了。

<script defer async src="%PUBLIC_URL%/some-file.js"></script>

【讨论】：

【解决方案2】：

就我而言，使用src="./<file>.js" 不起作用。使用 `%PUBLIC_URL%

【讨论】：

【解决方案3】：

除了 Dee Jee 解决方案，在尝试了他的解决方案后，我的错误从未消失。

我注意到（在头疼了两天之后）浏览器缓存文件不正确。

我的浏览器无法加载缓存文件的预览，并且 express 的状态代码为 301。
在浏览器开发工具的网络选项卡中，我发现这些文件是来自磁盘缓存的服务器。

解决方案

删除缓存的文件。通过在 1 小时内清除浏览器历史记录，从而删除所有缓存的文件。

【讨论】：

【解决方案4】：

我和你有同样的问题，我在我的服务器中改变了一些东西

你可以试试这个

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

【讨论】：

原题没有使用express.js；你能解释一下这是如何解决这个问题的吗？

【解决方案5】：

更新—— 改用这个：

<script type="text/babel" src="./lander.js"></script>

将type="text/jsx" 添加为script 标签的属性，用于包含必须由JSX Transformer 转换的JavaScript 文件，如下所示：

<script type="text/jsx" src="./lander.js"></script>

然后您可以使用 MAMP 或其他一些服务在 localhost 上托管页面，以便所有包含项都能正常工作，如 here 所讨论的那样。

感谢大家的帮助！

【讨论】：

python -m SimpleHTTPServer 8080 是常用的，因为您不必安装、运行和配置像 apache 这样的持久服务器。
完美运行，我刚刚添加了text/jsx 属性值
更新到type="text/babel"，在开发模式下使用这个脚本转换JSX：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

【解决方案6】：

添加type="text/babel"作为脚本标签的属性，像这样：

<script type="text/babel" src="./lander.js"></script>

【讨论】：

【解决方案7】：

如果您遇到这样的错误：

SyntaxError: Embedded: Unexpected token (107:9) 105

可能是你缺少一个大括号

【讨论】：

【解决方案8】：

尝试添加 webpack，它解决了我项目中的类似问题。特别是“预设”部分。

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },

【讨论】：

【解决方案9】：

将type="text/babel" 添加到包含 .jsx 文件的脚本中并添加：<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

【讨论】：

对于版本 6：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 如提到的on here

【解决方案10】：

JSTransform 是 deprecated ，请使用 babel 代替。

<script type="text/babel" src="./lander.js"></script>

【讨论】：

【解决方案11】：

如果你有类似的东西

Uncaught SyntaxError: embedded: Unexpected token

你可能在这样的地方漏掉了一个逗号：

  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>
      )
  }
  });

【讨论】：

即时解决方案。）

【解决方案12】：

您的代码是正确的。 JSX代码需要编译成JS：

http://facebook.github.io/react/jsx-compiler.html

【讨论】：

试过了，现在我只是得到“Uncaught SyntaxError: Unexpected token ILLEGAL”
你在用chrome吗？它会给你一个行号并指向特定的代码吗？
我的错，如果不转义它们就不能换行，所以你需要将它们与+ 连接起来......更新现在应该可以工作了。
现在我得到这个：“未捕获的错误：不变违规：ReactCompositeComponent.render()：必须返回有效的 ReactComponent。您可能返回了未定义的数组或其他一些无效对象。”似乎字符串不是有效的反应组件
啊我知道这里发生了什么...您需要将 jsx react 代码编译成 javascript...您是这样做还是直接在浏览器中运行？