web-dev-qa-db-fra.com

ReactJS: "Uncaught SyntaxError: Jeton inattendu <"

J'essaie de commencer à construire un site dans ReactJS. Cependant, lorsque j'ai essayé de mettre mon JS dans un fichier séparé, j'ai commencé à avoir l'erreur suivante: "Uncaught SyntaxError: Jeton inattendu <".

J'ai essayé d'ajouter /** @jsx React.DOM */ en haut du fichier JS, mais cela ne résout rien. Vous trouverez ci-dessous les fichiers HTML et JS. Des idées sur ce qui ne va pas?

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

EDIT: Je me suis rendu compte que je devais ajouter type="text/jsx" à la balise de script qui inclut mon code d'atterrisseur. Cependant, après avoir ajouté ceci et rechargé, je reçois cet avertissement

"Vous utilisez le transformateur JSX intégré au navigateur. Assurez-vous de précompiler votre fichier JSX pour la production - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

suivi de cette erreur:

"XMLHttpRequest ne peut pas charger fichier: ///Users/.../lander.js. Les demandes Cross Origin ne sont prises en charge que pour les schémas de protocole: http, données, chrome-extension, https, chrome-extension-resource."

il me semble que je dois faire autre chose pour que la transformation jsx du navigateur fonctionne, mais je ne suis pas sûr de ce que c'est.

EDIT: OOOOH dois-je l'héberger en utilisant MAMP ou quelque chose?

javascripthtmlreactjsreact-jsx
88
kat

Ajoutez type="text/jsx" à la balise src attribut of script utilisée pour inclure le fichier JavaScript qui doit être transformé par JSX Transformer, comme suit:

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

Ensuite, vous pouvez utiliser MAMP ou un autre service pour héberger la page sur localhost afin que toutes les inclusions fonctionnent, comme indiqué précédemment ici .

Merci à tous pour votre aide!

109
kat

JSTransform est obsolète , utilisez plutôt babel.

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

Ajoutez type="text/babel" en tant qu'attribut de la balise de script, comme suit:

<script type="text/babel" src="./lander.js"></script>
20
NAVIN SINGH BISHT

Ajoutez type="text/babel" au script qui inclut le fichier .jsx et ajoutez ceci: <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

11
AlexGH

Si vous avez quelque chose comme

Uncaught SyntaxError: embedded: Unexpected token

Vous avez probablement manqué une virgule dans un endroit comme celui-ci:

  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>
      )
  }
  });
4
e18r

Le code que vous avez est correct. Le code JSX doit être compilé dans JS:

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

3
stewart715

Si vous obtenez une erreur comme celle-ci:

SyntaxError: embedded: Jeton inattendu (107: 9) 105

Il se peut que vous manquiez une accolade

2
R2D2

Essayez d'ajouter dans WebPack, cela a résolu le même problème dans mon projet. Spécialement la partie "presets".

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