Reactjs: Erreur de jeton inattendue '<'

99

Je commence juste avec Reactjs et j'écrivais un composant simple pour afficher la
libalise et suis tombé sur cette erreur:

Jeton inattendu '<'

J'ai mis l'exemple à jsbin ci-dessous http://jsbin.com/UWOquRA/1/edit?html,js,console,output

S'il vous plaît laissez-moi savoir ce que je fais mal.

reactjs sam
la source

Réponses:

30

MISE À JOUR: Dans React 0.12+, le pragma JSX n'est plus nécessaire.

Assurez-vous d'inclure le pragma JSX en haut de vos fichiers:

/** @jsx React.DOM */

Sans cette ligne, le jsxtransformateur binaire et intégré au navigateur laissera vos fichiers inchangés.

Sophie Alpert
la source
10
Mais <script type = "text / jsx"> est
xavier
4
en utilisant Babel, j'ai dû ajouter type="text/babel". Brave new world of javascript
Connor Leech
cela m'a aidé dans ma situation: stackoverflow.com/questions/33460420/…
timhc22
28

Le problème jeton inattendu '<' est dû à l'absence du préréglage Babel.

Solution: vous devez configurer votre configuration Webpack comme suit

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

ici .jsx vérifie les formats .js et .jsx.

vous pouvez simplement installer la dépendance babel en utilisant node comme suit

npm install babel-preset-react

Je vous remercie

Nuwa
la source
Rien dans la question n'indique que l'affiche originale utilise Babel.
ivarni
Il a dit qu'il ne faisait que commencer avec Reactjs, car le preset babel de React doit être utilisé.Peut-être que la configuration du webpack a raté le preset babel
Nuwa
Rien dans la question n'indique non plus que l'affiche originale utilise Webpack. Aucun de ces éléments n'est requis pour travailler avec React, bien qu'ils soient tous les deux pratiques.
ivarni
4
@Nuwa merci. npm install babel-preset-reactrésolu mon problème.
Yasin Yörük
4
si vous avez .babelrcjuste un fichier dans le projet "presets": ["env", "react", "es2015"]et c'est tout !!
Byron Lopez
21

dans mon cas, je n'avais pas réussi à inclure l'attribut type sur ma balise de script.

<script type="text/jsx">
Sean M
la source
7

Vous devez soit transpiler / compiler ce code JSX en javascript, soit utiliser le transformateur intégré au navigateur

Regardez http://facebook.github.io/react/docs/getting-started.html et notez les <script>balises, vous avez besoin de celles incluses pour que JSX fonctionne dans le navigateur.

krs
la source
Oui, je sais, voici le lien
sam
Que jsbin semble avoir sa propre façon d'exécuter le JS, l'erreur vient de leur code.
krs
Mais c'est la même erreur et au même numéro de ligne. En outre, y a-t-il une autre raison pour laquelle une telle erreur se produira si j'utilise le même code que celui fourni dans le lien
sam
jsfiddle.net/9st5Q voici votre code dans un jsfiddle, où React fonctionne très bien.
krs
7
assurez-vous de définir le type = "text / jsx" dans la <script type="text/jsx">balise, si vous voulez, veuillez coller tout votre code dans une pâte
hastebin.org
7

J'ai cette erreur et je n'ai pas pu résoudre cela pendant deux jours.La correction d'erreur est donc très simple. Dans le corps, où vous connectez votre script, ajoutez type="text/jsx"et cela résoudra le problème.

Руслан
la source
pouvez-vous également expliquer votre réponse?
MMascarin le
1
Je pense que lorsque vous donnez type = "text / jsx", vous avez porté un compilateur pour savoir de quel type de document ou de fichier il s'agit.
Руслан
3

Voici un exemple de travail de votre 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>

Exécutez ce code à partir d'un seul fichier et cela devrait fonctionner.

myusuf
la source
2

Si vous êtes comme moi et sujet à des erreurs stupides, vérifiez également votre package.json s'il contient votre preset babel:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
gaufres roses
la source
1

si nous considérons la configuration de votre site réel, vous devez exécuter ReactJS dans la tête

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

et ajoutez un attribut à votre fichier js - type = "text / babel" comme

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

alors l'exemple de code ci-dessous fonctionnera:

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

Utilisez le code suivant. J'ai ajouté une référence à React et React DOM. Utilisez ES6 / Babel pour transformer votre code JS en JavaScript vanille. Notez que la méthode Render provient de ReactDOM et assurez-vous que cette méthode de rendu a une cible spécifiée dans le DOM. Parfois, vous pouvez rencontrer un problème en raison du fait que la méthode render () ne peut pas trouver l'élément cible. Cela se produit car le code de réaction est exécuté avant le rendu du DOM. Pour contrer cela, utilisez jQuery ready () pour appeler la méthode render () de React. De cette façon, vous serez sûr que le DOM sera rendu en premier. Vous pouvez également utiliser l'attribut defer sur votre script d'application.

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

Code JS:

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

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

J'espère que cela résout votre problème. :-)

Abhay Shiro
la source
1

Vérifiez si .babelrc se trouve dans le dossier racine de votre application, pas dans un sous-dossier. si tel est le cas, déplacez le fichier vers la racine.

Andrew Okesokun
la source
0

Vous pouvez utiliser un code comme celui-ci:

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

Et n'oubliez pas d'ajouter <div id='main-content'></div>dans bodyvotrehtml

Mais dans votre fichier package.json, vous devez utiliser ces dépendances:

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

Cela fonctionne pour moi mais j'ai également utilisé webpack, avec ces options (dans 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
la source
0

Dans mon cas, en plus des babelpréréglages, j'ai également dû ajouter ceci à mon .eslintrc:

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

J'ai juste commencé à apprendre Reactaujourd'hui et je faisais face au même problème. Voici le code que j'avais écrit.

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

Et comme vous pouvez le voir, j'avais manqué une virgule (,) après l'avoir utilisé <Hello/>. Et l'erreur elle-même indique sur quelle ligne nous devons regarder.

entrez la description de l'image ici

Donc, une fois que j'ai ajouté une virgule avant le deuxième paramètre de la ReactDOM.render()fonction, tout a commencé à fonctionner correctement.

Sibeesh Venu
la source
0

voici une autre façon de le faire html 

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

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

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

</html>

fichier index.js avec le chemin 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"));

utilisez ce package.json vous permettra de démarrer rapidement

{
  "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
la source
0

Cependant, j'avais tous les chargeurs babel appropriés dans mon fichier de configuration .babelrc. Ce script de construction avec parcel-bundler produisait l'erreur de jeton inattendue <et les erreurs de type mime dans la console du navigateur pour moi lors de l'actualisation manuelle de la page.

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

La mise à jour du script de construction a résolu les problèmes pour moi.

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