web-dev-qa-db-ja.com

Reactjs：予期しないトークン '<'エラー

私はReactjsから始めて、表示する簡単なコンポーネントを書いていました
liタグでこのエラーが発生しました：

予期しないトークン '<'

以下のjsbinに例を配置しました http://jsbin.com/UWOquRA/1/edit?html,js,console,output

私が間違っていることを教えてください。

reactjs
80
sam

type = "text/babel"を使用して解決しました

<script src="js/reactjs/main.js" type = "text/babel"></script>
44
Yuliia Ashomok

PDATE： React 0.12+では、JSXプラグマは不要になりました。

ファイルの先頭にJSXプラグマを含めるようにしてください。

/** @jsx React.DOM */

この行がないと、jsxバイナリおよびブラウザー内トランスフォーマーはファイルを変更しません。

29
Sophie Alpert

問題予期しないトークン '<'は、バベルプリセットが欠落しているためです。

解決策：Webpack構成を次のように構成する必要があります

          {
            test   :/\.jsx?$/,
            exclude:/(node_modules|bower_components)/,
            loader :'babel',
            query  :{
                presets:['react','es2015']
            }
        }

ここで、.jsxは.jsと.jsxの両方の形式をチェックします。

次のようにノードを使用して単純にbabel依存関係をインストールできます

npm install babel-preset-react

ありがとうございました

22
Nuwa

私の場合、スクリプトタグにtype属性を含めることができませんでした。

<script type="text/jsx">
18
Sean McMills

そのJSXコードをjavascriptにトランスパイル/コンパイルするか、ブラウザ内のトランスフォーマーを使用する必要があります

http://facebook.github.io/react/docs/getting-started.html を見て、<script>タグに注意してください。JSXがブラウザ。

7
krs

以下は、jsbinの実際の例です。

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

jsx：

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

このコードを単一のファイルから実行すると、動作するはずです。

3
myusuf

私はこのエラーがあり、2日間これを解決できませんでした。エラーの修正は非常に簡単です。 bodyでscriptを接続する場所にtype="text/jsx"を追加すると、問題が解決します。

3
Руслан

次のコードを使用します。 ReactおよびReact DOMへの参照を追加しました。 ES6/Babelを使用して、JSコードをVanilla JavaScriptに変換します。 RenderメソッドはReactDOMから取得され、renderメソッドにDOMで指定されたターゲットがあることを確認してください。 render（）メソッドがターゲット要素を見つけられないという問題に直面する場合があります。これは、DOMがレンダリングされる前に反応コードが実行されるために発生します。これに対抗するには、jQuery ready（）を使用してReactのrender（）メソッドを呼び出します。これにより、DOMが最初にレンダリングされることが確実になります。アプリスクリプトでdefer属性を使用することもできます。

HTMLコード：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>

</body>
</html>

JSコード：

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

これで問題が解決することを願っています。 :-)

1
Abhay Shiro

タグを正しく解析するには、このbabelバージョンを使用する必要があります： https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js およびスクリプトの属性「type = 'text/babel'」。また、カスタムスクリプトは「body」タグ内にある必要があります。

1
Kirill Shur

あなたが私のようであり、愚かな間違いを起こしやすい場合は、package.jsonにbabelプリセットが含まれているかどうかも確認してください。

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
1
pinkwaffles

実際のサイト構成を検討する場合は、ReactJSを頭で実行する必要があります

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

jsファイルに属性を追加します-type = "text/babel"のように

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

次のコード例が機能します：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
1
Roman

あなたがそれを行うことができる別の方法をheres

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

パスがsrc/index.jsのindex.jsファイル

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

このpackage.jsonを使用すると、すぐに起動して実行されます

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}
0
Snivio

ただし、.babelrc構成ファイルにはすべて適切なbabelローダーがありました。このparcel-bundlerを使用したビルドスクリプトは、手動ページ更新時にブラウザコンソールで予期しないトークンエラー<およびMIMEタイプエラーを生成していました。

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

ビルドスクリプトを更新すると、問題が修正されました。

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
0
Abhijeet

次のようなコードを使用できます。

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

bodyのhtmlに<div id='main-content'></div>を追加することを忘れないでください

ただし、package.jsonファイルでは、次の依存関係を使用する必要があります。

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

それは私のために働いていますが、私はこのオプションでwebpackも使用しました（webpack.config.jsに）：

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
0
Vitaliy Andrusishyn

私の場合、babelプリセットに加えて、これを.eslintrcに追加する必要がありました。

{
  "extends": "react-app",
  ...
}
0
dferrazm

今日Reactの学習を始めたばかりで、同じ問題に直面していました。以下は私が書いたコードです。

<script type="text/babel">
    class Hello extends React.Component {
        render(){
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
    ReactDOM.render(
        <Hello/>
        document.getElementById('react-container')
    )


</script>

ご覧のとおり、<Hello/>を使用した後、コンマ（、）を忘れていました。また、エラー自体は、どの行を調べる必要があるかを示しています。

enter image description here

したがって、ReactDOM.render()関数の2番目のパラメーターの前にコンマを追加すると、すべて正常に動作し始めました。

0
Sibeesh Venu