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?

javascript html reactjs react-jsx kat
la 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

Réponses:

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
la 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
la 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
la source
13

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>

AlexGH
la 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
la 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
la 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
la 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
la 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
la source
La question d'origine n'utilisait pas express.js; pouvez-vous expliquer comment cela résout le problème?
Jonathan Rosa le