Reactjs: Unerwarteter Token '<' Fehler

99

Ich fange gerade mit Reactjs an und habe eine einfache Komponente zum Anzeigen des
liTags geschrieben und bin auf diesen Fehler gestoßen :

Unerwartetes Token '<'

Ich habe das Beispiel unter jsbin unter http://jsbin.com/UWOquRA/1/edit?html,js,console,output angegeben

Bitte lassen Sie mich wissen, was ich falsch mache.

reactjs Sam
quelle

Antworten:

30

UPDATE: In React 0.12+ ist das JSX-Pragma nicht mehr erforderlich.

Stellen Sie sicher, dass das JSX-Pragma oben in Ihren Dateien enthalten ist:

/** @jsx React.DOM */

Ohne diese Zeile lassen der jsxBinär- und der Browser-Transformator Ihre Dateien unverändert.

Sophie Alpert
quelle
10
Aber <script type = "text / jsx"> ist
xavier
4
mit babel musste ich einwerfen type="text/babel". Schöne neue Welt von Javascript
Connor Leech
Dies half unter meinen Umständen: stackoverflow.com/questions/33460420/…
timhc22
28

Das Problem Unerwartetes Token '<' ist darauf zurückzuführen, dass die Babel-Voreinstellung fehlt.

Lösung: Sie müssen Ihre Webpack-Konfiguration wie folgt konfigurieren

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

Hier überprüft .jsx sowohl die Formate .js als auch .jsx.

Sie können die Babel-Abhängigkeit einfach mithilfe des Knotens wie folgt installieren

npm install babel-preset-react

Danke dir

Nuwa
quelle
Die Frage enthält nichts, was darauf hindeutet, dass das Originalplakat Babel verwendet.
ivarni
Er sagte, er fange gerade mit Reactjs an, denn React Babel Preset muss verwendet werden. Möglicherweise hat die Webpack-Konfiguration das Babel Preset verpasst
Nuwa
Die Frage enthält nichts, was darauf hindeutet, dass das Originalplakat auch ein Webpack verwendet. Keiner von beiden ist für die Arbeit mit React erforderlich, obwohl beide praktisch sind.
ivarni
4
@ Nuwa danke. npm install babel-preset-reactlöste mein Problem.
Yasin Yörük
4
Wenn Sie nur eine .babelrcDatei im Projekt haben "presets": ["env", "react", "es2015"]und das wars !!
Byron Lopez
21

In meinem Fall konnte ich das Typattribut nicht in mein Skript-Tag aufnehmen.

<script type="text/jsx">
Sean M.
quelle
7

Sie müssen diesen JSX-Code entweder in Javascript transpilieren / kompilieren oder den In-Browser-Transformator verwenden

Schauen Sie sich http://facebook.github.io/react/docs/getting-started.html an und notieren Sie sich die <script>Tags. Sie benötigen die Tags, damit JSX im Browser funktioniert.

krs
quelle
Ja ich weiß, unten ist der aktualisierte jsbin Link
Sam
Daß jsbin seine eigene Art der Ausführung des JS zu haben scheint, liegt der Fehler in ihrem Code.
krs
Aber es ist der gleiche Fehler und die gleiche Zeilennummer. Gibt es auch einen anderen Grund, warum ein solcher Fehler auftritt, wenn ich den gleichen Code verwende, der im Link angegeben ist
Sam
jsfiddle.net/9st5Q Hier ist Ihr Code in einer jsfiddle, in der React gut funktioniert.
krs
7
Stellen Sie sicher, dass Sie den Typ = "text / jsx" im <script type="text/jsx">Tag setzen. Wenn Sie möchten, fügen Sie bitte Ihren gesamten Code in eine hastebin.org-Paste ein
krs
7

Ich habe diesen Fehler und konnte ihn zwei Tage lang nicht lösen. Die Fehlerbehebung ist also sehr einfach. In body, wo Sie Ihre verbinden script, fügen Sie hinzu type="text/jsx"und dies wird das Problem lösen.

Руслан
quelle
Können Sie auch eine Erklärung für Ihre Antwort geben?
MMascarin
1
Ich denke, wenn Sie type = "text / jsx" geben, haben Sie den Compiler getragen, um zu wissen, um welche Art von Dokument oder Datei es sich handelt.
24услан
3

Hier ist ein Arbeitsbeispiel von Ihrem 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>

Führen Sie diesen Code aus einer einzelnen Datei aus und es sollte funktionieren.

myusuf
quelle
2

Wenn Sie wie ich sind und zu dummen Fehlern neigen, überprüfen Sie auch Ihre package.json, ob sie Ihre Babel-Voreinstellung enthält:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
rosa Waffeln
quelle
1

Wenn wir Ihre reale Site-Konfiguration berücksichtigen, müssen Sie ReactJS im Kopf ausführen

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

und füge ein Attribut zu deiner js-Datei hinzu - type = "text / babel" like

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

dann funktioniert das folgende Codebeispiel:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
römisch
quelle
1

Verwenden Sie den folgenden Code. Ich habe einen Verweis auf React und React DOM hinzugefügt. Verwenden Sie ES6 / Babel, um Ihren JS-Code in Vanille-JavaScript umzuwandeln. Beachten Sie, dass die Rendermethode aus ReactDOM stammt, und stellen Sie sicher, dass für die Rendermethode ein Ziel im DOM angegeben ist. Manchmal kann es zu einem Problem kommen, dass die render () -Methode das Zielelement nicht finden kann. Dies liegt daran, dass der Reaktionscode ausgeführt wird, bevor das DOM gerendert wird. Um dem entgegenzuwirken, rufen Sie mit jQuery ready () die render () -Methode von React auf. Auf diese Weise können Sie sicher sein, dass DOM zuerst gerendert wird. Sie können das Attribut defer auch in Ihrem App-Skript verwenden.

HTML Quelltext:

<!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-Code:

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

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

Hoffe das löst dein Problem. :-)

Abhay Shiro
quelle
1

Überprüfen Sie, ob sich .babelrc in Ihrem Anwendungsstammordner und nicht in einem Unterordner befindet. Wenn dies der Fall ist, verschieben Sie die Datei in das Stammverzeichnis.

Andrew Okesokun
quelle
0

Sie können folgenden Code verwenden:

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

Und vergessen Sie nicht add <div id='main-content'></div>in die bodyin Ihremhtml

In Ihrer package.json-Datei sollten Sie jedoch folgende Abhängigkeiten verwenden:

  "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",
...
}

Es funktioniert für mich, aber ich habe auch Webpack verwendet, mit diesen Optionen (in webpack.config.js):

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

In meinem Fall musste babelich neben den Voreinstellungen auch Folgendes zu meinem hinzufügen .eslintrc:

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

Ich habe heute gerade angefangen zu lernen Reactund hatte das gleiche Problem. Unten ist der Code, den ich geschrieben hatte.

<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>

Und wie Sie sehen, hatte ich nach der Verwendung ein Komma (,) verpasst <Hello/>. Und der Fehler selbst sagt, auf welche Linie wir schauen müssen.

Geben Sie hier die Bildbeschreibung ein

Sobald ich also vor dem zweiten Parameter für die ReactDOM.render()Funktion ein Komma einfügte, funktionierten alle einwandfrei.

Sibeesh Venu
quelle
0

Hier ist eine andere Möglichkeit, wie Sie es HTML tun können 

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

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

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

</html>

index.js Datei mit dem Pfad src / 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"));

Verwenden Sie dieses Paket. Mit json können Sie schnell loslegen

{
  "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": []
}
Snivio
quelle
0

Obwohl ich alle richtigen Babel-Lader in meiner .babelrc-Konfigurationsdatei hatte. Dieses Build-Skript mit Paketbündler erzeugte bei der manuellen Seitenaktualisierung für mich den unerwarteten Token-Fehler <und MIME-Typ-Fehler in der Browserkonsole.

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

Durch das Aktualisieren des Build-Skripts wurden die Probleme für mich behoben.

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