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

回答:

30

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

ファイルの先頭にJSXプラグマを必ず含めてください。

/** @jsx React.DOM */

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

— ソフィーアルパート
ソース
10
しかし、<script type = "text / jsx">は
— ザビエル
4
バベルを使って投げ入れなければならなかったtype="text/babel"。JavaScriptの勇敢な新しい世界
— Connor Leech
これは私の状況で助け：stackoverflow.com/questions/33460420/...
— timhc22
28

問題予期しないトークン '<'は、Babelプリセットがないためです。

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

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

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

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

npm install babel-preset-react

ありがとうございました

— ヌワ
ソース
元のポスターがバベルを使用していることを示す質問には何もありません。
— ivarni 2016年
彼はバベルプリセットHAVE WebPACKの構成はバベルプリセット逃したことuse.Mayことに反応するために、彼はただ、Reactjsで開始していると述べた
— 女カ
元の投稿者がwebpackを使用していることを示す質問にも何もありません。どちらも便利ですが、どちらもReactでの作業には必要ありません。
— ivarni 2016年
4
@ぬわありがとうございます。npm install babel-preset-react私の問題を解決しました。
— YasinYörük2017
4
あなたは持っている場合.babelrcだけで、プロジェクト内のファイルを"presets": ["env", "react", "es2015"]、それはそれです！
— バイロンロペス
21

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

<script type="text/jsx">
— ショーンM
ソース
7

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

http://facebook.github.io/react/docs/getting-started.htmlを見て、<script>タグをメモします。JSXがブラウザーで機能するには、これらのタグが含まれている必要があります。

— krs
ソース
私が知っているはい、以下の更新jsbinのある リンクは
— SAM
そのjsbinにはJSを実行する独自の方法があるようですが、エラーはコード内にあります。
— 2014年
しかし、それは同じエラーと同じ行番号です。また、リンクで
— sam
jsfiddle.net/9st5Qは、Resactが正常に機能するjsfiddleのコードです。
— 2014年
7
確認し、設定タイプ=「テキスト/ JSX」で<script type="text/jsx">タグを、あなたがしたい場合は、A hastebin.orgにあなたの全体のコードを貼り付けてください貼り付ける
— KRS
7

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

— Руслан
ソース
答えの説明もできますか？
— MMascarin
1
type = "text / jsx"を指定すると、コンパイラーを身につけて、これがどのタイプの文書またはファイルであるかを知っていると思います。
— Руслан
3

ここにあなたの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>

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

— myusuf
ソース
2

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

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
— ピンクワッフル
ソース
1

実際のサイト構成を考慮すると、ReactJSをヘッドで実行する必要があります

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

そしてあなたのjsファイルに属性を追加してください-type = "text / babel" like

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

次に、以下のコード例が機能します：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
— ローマ人
ソース
1

次のコードを使用します。ReactとReact DOMへの参照を追加しました。ES6 / Babelを使用して、JSコードを通常の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

.babelrcが、サブフォルダー内ではなく、アプリケーションルートフォルダー内にあるかどうかを確認します。その場合は、ファイルをルートに移動してください。

— アンドリュー・オケソクン
ソース
0

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

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

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

しかし、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.config.jsに）webpackも使用しました：

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

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

{
  "extends": "react-app",
  ...
}
— dferrazm
ソース
0

私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/>た後、カンマ（、）を逃しました。そしてエラー自体は、どの行を見る必要があるかを示しています。

ここに画像の説明を入力してください

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

— シビーシュヴェヌ
ソース
0

あなたがそれをすることができるもう一つの方法はこちらですhtml 

<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

ただし、.babelrc構成ファイルにはすべての適切なバベルローダーが含まれていました。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"
 }
— Abhijeet
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.