ReactJS：「Uncaught SyntaxError：Unexpected token <」

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などを使用してホストする必要がありますか？

— キャット
ソース

「JS」ファイルをどのように含めますか？

— クエンティン

1

次のスクリプトコードを追加する必要があります。<script src = " unpkg.com/@babel/standalone/babel.min.js "> </script >

— Steven

2019年更新：type="text/babel"JSタグをインポートするスクリプトタグに追加し、@ Stevenが上記のコメントで言及したBabelスクリプトが私のために機能しました。

— Syknapse

128

UPDATE-代わりにこれを使用してください：

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

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

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

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

みんな助けてくれてありがとう！

— キャット
ソース

3

python -m SimpleHTTPServer 8080Apacheのような永続サーバーをインストール、実行、構成する必要がないため、一般的に使用されます。

— Brigand 2015年

3

完全に機能し、text/jsx属性値を追加しました

— William

27

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

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

— Pumych
ソース

21

次のtype="text/babel"ように、scriptタグの属性として追加します。

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

— NAVIN SINGH BISHT
ソース

13

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

— AlexGH
ソース

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
ソース

2

インスタントソリューション。）

— Zoltán2016

3

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

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

— スチュワート715
ソース

今私はちょうど取得しています、それを試してみました「キャッチされないでSyntaxErrorを：予期しないトークンILLEGAL」

— KAT

クロムを使用していますか？それはあなたに行番号を与え、特定のコードを指し示しますか？

— stewart715 2015年

私の悪いことに、エスケープせずに改行を行うことはできないため、+... updatedで連結する必要があります。

— stewart715 2015年

「キャッチされていないエラー：不変の違反：ReactCompositeComponent.render（）：有効なReactComponentを返す必要があります。未定義、配列、またはその他の無効なオブジェクトが返された可能性があります。」文字列は有効な反応コンポーネントではないようです

— kat

ああ、ここで何が起こっているのか知っています... jsx反応コードをjavascriptにコンパイルする必要があります...それを行っているのですか、それともブラウザで直接実行していますか？

— stewart715 2015年

3

このようなエラーが発生した場合：

SyntaxError：埋め込み：予期しないトークン（107：9）105

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

— ダースベイダー卿
ソース

1

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

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

— プラバトジャ
ソース

0

私はあなたと同じ問題を抱えており、サーバーで何かを変更しました

あなたはこれを試すかもしれません

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

— ディージー
ソース

元の質問ではexpress.jsを使用していませんでした。これで問題がどのように修正されるのか説明してもらえますか？

— Jonathan Rosa