ReactJS：“未捕获的SyntaxError：意外令牌<”

110

我正在尝试开始在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转换正常工作，似乎还需要做其他事情，但是我不确定这是什么。

编辑：OOOOH我是否需要使用MAMP托管它？

— at
source

您如何添加“ JS”文件？

— 昆汀2015年

1

您需要另外添加以下脚本代码。<script src =“ unpkg.com/@babel/standalone/babel.min.js" > </script >

— Steven

2019更新：添加type="text/babel"到脚本标签中，用于导入我的JS文件和上面评论中@Steven提到的Babel脚本对我有用。

— Syknapse

128

更新-使用此代替：

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

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

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

然后你可以使用甲基苯丙胺或一些其他服务托管的网页在本地主机上，这样所有的包裹的工作，为讨论在这里。

谢谢各位的帮助！

— at
source

3

python -m SimpleHTTPServer 8080之所以经常使用它，是因为您不必安装，运行和配置apache之类的持久性服务器。

— 布莱根2015年

3

效果很好，我刚刚添加了text/jsx属性值

— William

27

JSTransform已弃用，请改用babel。

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

— 普米奇
source

21

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

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

— 纳文·辛格·比什特
source

13

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

— 亚历克斯·GH
source

3

对于6版本：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>提到就在这里

— user3405291

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

— e18r
source

2

即时解决方案。）

— Zoltán16年

3

您输入的代码正确无误。JSX代码需要编译为JS：

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

— stewart715
source

尝试过，现在我刚收到“ Uncaught SyntaxError：Unexpected token ILLEGAL”

— 凯特

您在使用Chrome吗？它为您提供行号并指向特定代码吗？

— stewart715

我的坏人，不能在不转义的情况下进行换行，因此您需要使用+... updated 来连接它们，现在应该可以工作。

— stewart715

现在我得到了：“未捕获的错误：始终违反：ReactCompositeComponent.render（）：必须返回一个有效的ReactComponent。您可能已经返回了undefined，数组或其他无效对象。” 似乎字符串不是有效的react组件

— kat 2015年

啊，我知道这是怎么回事...您需要将jsx react代码编译为javascript ...您是在执行此操作还是直接在浏览器中运行？

— stewart715

3

如果遇到这样的错误：

语法错误：嵌入式：意外令牌（107：9）105

可能是您缺少大括号

— 达斯·维达勋爵
source

1

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

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

— 普拉哈托贾
source

0

我与您有相同的问题，并且我在服务器中进行了更改

你可以试试这个

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

— 迪吉
source

最初的问题没有使用express.js；您能否解释一下如何解决此问题？

— 乔纳森·罗莎