ReactJS: "Erreur de syntaxe non interceptée: jeton inattendu <"

110

J'essaie de commencer à créer un site dans ReactJS. Cependant, lorsque j'ai essayé de mettre mon JS dans un fichier séparé, j'ai commencé à obtenir cette erreur: "Uncaught SyntaxError: Uncaught token <".

J'ai essayé d'ajouter /** @jsx React.DOM */en haut du fichier JS, mais cela n'a rien corrigé. Voici 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: J'ai réalisé que je devais ajouter type="text/jsx"à la balise de script qui comprend mon code d'atterrisseur. Cependant, après avoir ajouté ceci et rechargé, j'obtiens cet avertissement

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

suivi de cette erreur:

"XMLHttpRequest ne peut pas charger le fichier: ///Users/.../lander.js. Les requêtes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, chrome-extension, https, chrome-extension-resource."

il semble qu'il y ait autre chose que je dois faire 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?

— kat
source

Comment incluez-vous votre fichier "JS"?

— Quentin

1

Vous devez en outre ajouter le code de script suivant. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

Mise à jour 2019 : l'ajout type="text/babel"à la balise de script où j'importe mon fichier JS et le script Babel que @Steven a mentionné dans le commentaire ci-dessus a fonctionné pour moi.

— Syknapse

128

MISE À JOUR - utilisez ceci à la place:

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

Ajouter type="text/jsx"comme attribut de la scriptbalise utilisée pour inclure le fichier JavaScript qui doit être transformé par JSX Transformer, comme ça:

<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é ici .

Merci pour toute l'aide à tous!

— kat
source

3

python -m SimpleHTTPServer 8080est couramment utilisé car vous n'avez pas besoin d'installer, d'exécuter et de configurer un serveur persistant tel qu'apache.

— Brigand

3

Fonctionne parfaitement, je viens d'ajouter la text/jsxvaleur d'attribut

— William

27

JSTransform est obsolète , veuillez utiliser babel à la place.

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

— Pumych
source

21

Ajoutez type="text/babel"comme attribut de la balise de script, comme ceci:

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

— NAVIN SINGH BISHT
source

13

Ajoutez type="text/babel"au script qui inclut le fichier .jsx et ajoutez ceci: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
source

3

Pour la version 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>comme mentionné ici

— user3405291

4

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

— e18r
source

2

Solution instantanée.)

— Zoltán

3

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

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

— stewart715
source

essayé, maintenant je reçois juste "Uncaught SyntaxError: Uncaught token ILLEGAL"

— kat

utilisez-vous chrome? vous donne-t-il un numéro de ligne et pointe vers un code spécifique?

— stewart715

mon mauvais, je ne peux pas faire de sauts de ligne sans les échapper, vous devez donc les concater avec +... mis à jour devrait fonctionner maintenant.

— stewart715

Maintenant j'obtiens ceci: "Erreur non interceptée: violation invariante: ReactCompositeComponent.render (): Un ReactComponent valide doit être retourné. Vous avez peut-être renvoyé undefined, un tableau ou un autre objet invalide." semble qu'une chaîne ne soit pas un composant de réaction valide

— kat

Ah je sais ce qui se passe ici ... vous devez compiler votre code jsx react en javascript ... faites-vous cela ou exécutez-vous directement dans le navigateur?

— stewart715

3

Si vous obtenez une erreur comme celle-ci:

SyntaxError: intégré: jeton inattendu (107: 9) 105

Il se peut que vous manquiez une parenthèse bouclée

— Seigneur Dark Vador
source

1

Essayez d'ajouter Webpack, cela a résolu le problème similaire dans mon projet. Surtout la partie "presets".

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

— prabhatojha
source

0

J'ai le même problème avec vous et j'ai changé quelque chose dans mon serveur

tu pourrais essayer ça

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

— Dee Jee
source

La question d'origine n'utilisait pas express.js; pouvez-vous expliquer comment cela résout le problème?

— Jonathan Rosa le