web-dev-qa-db-ja.com

ReactJS： "不明な構文エラー：予期しないトークン<"

ReactJSでサイトの構築を始めようとしています。ただし、JSを別のファイルに配置しようとすると、「Uncaught SyntaxError：Unexpected token <」というエラーが表示され始めました。

JSファイルの先頭に/** @jsx React.DOM */を追加しようとしましたが、何も修正されませんでした。以下は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などを使用してホストする必要がありますか？

javascripthtmlreactjsreact-jsx
85
kat

以下のように、JSX Transformerで変換する必要のあるJavaScriptファイルを含めるために使用されるsrcタグのscript属性にtype="text/jsx"を追加します。

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

次に here で説明したように、MAMPまたは他のサービスを使用して、localhostでページをホストし、すべてのインクルードが機能するようにします。

皆さん、助けてくれてありがとう！

104
kat

JSTransformは 非推奨 です。代わりにbabelを使用してください。

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

次のように、スクリプトタグの属性としてtype="text/babel"を追加します。

<script type="text/babel" src="./lander.js"></script>
19
NAVIN SINGH BISHT

.jsxファイルを含むスクリプトにtype="text/babel"を追加し、これを追加します：<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

11
AlexGH

次のようなものがある場合

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

持っているコードは正しいです。 JSXコードをJSにコンパイルする必要があります。

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

3
stewart715

このようなエラーが発生する場合：

SyntaxError：embedded：予期しないトークン（107：9）105

中括弧が抜けている可能性があります

2
R2D2

Webpackに追加してみてください、それは私のプロジェクトで同様の問題を解決しました。特に「プリセット」部分。

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