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

ReactJS: "Uncaught SyntaxError: Unexpected token <"

本文关键字：令牌 意外 语法 ReactJS 错误      更新时间：2023-09-26

我正在尝试开始在ReactJS中构建一个站点。但是，当我尝试将JS放在单独的文件中时，我开始收到此错误："未捕获的语法错误：意外的令牌<"。

我尝试将/** @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 或其他东西托管它吗？

更新 --请改用这个：

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

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

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

然后，您可以使用 MAMP 或其他一些服务在本地主机上托管页面，以便所有包含都正常工作，如此处所述。

感谢大家的帮助！

JSTransform 已被弃用，请改用 babel。

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

添加 type="text/babel" 作为脚本标记的属性，如下所示：

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

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

如果你有类似的东西

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

如果您收到这样的错误：

语法错误：嵌入：意外标记 （107：9） 105

可能是您缺少一个大括号

您拥有的代码是正确的。JSX 代码需要编译为 JS：

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

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

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

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

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

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

我和你有同样的问题，我的服务器中发生了一些变化

你可以试试这个

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

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

我注意到（经过两天的挠头）浏览器不正确地缓存了文件。

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

溶液

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

Babel 是一个 JavaScript 转译器。Babel 将 ES6 代码转换为 ES5 代码。

Babel 的另一个方便的特性是它能理解 JSX。Babel 将我们的 JSX 编译成普通的 ES5 JS，然后我们的浏览器可以解释和执行。我们只需要指示浏览器我们要使用 Babel 来编译和运行我们的 JavaScript 代码。

添加属性类型="文本/通天塔"

<script type="text/babel" src="./lander.js"></script>
相关文章：