ReactJS: "Uncaught SyntaxError: Unexpected token <"

Question

我正在尝试开始使用 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" 添加到包含我的着陆器代码的脚本标签。但是，添加并重新加载后，我收到此警告

"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"

随后出现此错误：

"XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource."

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

编辑：哦哦，我需要使用 MAMP 或其他方式托管它吗？

Answer 1

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

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

Answer 2

更新—— 用这个代替：

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

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

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

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

感谢大家的帮助！

Answer 3

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

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

Answer 4

如果你有类似的东西

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

Answer 5

JSTransform 是 deprecated ，请改用 babel。

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

Answer 6

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

Answer 7

尝试在webpack中添加，它解决了我项目中的类似问题。特别是 "presets" 部分。

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

Answer 8

如果您遇到这样的错误：

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

可能是你少了一个大括号

Answer 9

我和你有同样的问题，我已经改变了我的服务器

你可以试试这个

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

Answer 10

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

我注意到（经过两天的摸索）浏览器缓存文件不正确。

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

解决方案

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

Answer 11

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

Answer 12

就我而言，使用 src="./<file>.js" 无效。使用 %PUBLIC_URL% 成功了。

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

ReactJS: "Uncaught SyntaxError: Unexpected token <"

ReactJS: "Uncaught SyntaxError: Unexpected token <"

html

javascript

reactjs

react-jsx

解决方案