ReactJS: "Uncaught SyntaxError: Unexpected token <"

110

Sto cercando di iniziare a creare un sito in ReactJS. Tuttavia, quando ho provato a mettere il mio JS in un file separato, ho iniziato a ricevere questo errore: "Uncaught SyntaxError: Unexpected token <".

Ho provato ad aggiungere /** @jsx React.DOM */all'inizio del file JS, ma non ha risolto nulla. Di seguito sono riportati i file HTML e JS. Qualche idea su cosa sta andando storto?

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: mi sono reso conto che devo aggiungere type="text/jsx"al tag script che include il mio codice lander. Tuttavia, dopo averlo aggiunto e ricaricato, viene visualizzato questo avviso

"Stai utilizzando il trasformatore JSX nel browser. Assicurati di precompilare il tuo JSX per la produzione - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

seguito da questo errore:

"XMLHttpRequest non può caricare il file: ///Users/.../lander.js. Le richieste cross-origin sono supportate solo per schemi di protocollo: http, data, chrome-extension, https, chrome-extension-resource."

sembra che ci sia qualcos'altro che devo fare per far funzionare la trasformazione jsx del browser, ma non sono sicuro di cosa sia.

EDIT: OOOOH devo ospitarlo usando MAMP o qualcosa del genere?

— Kat
fonte

Come includi il tuo file "JS"?

— Quentin

1

È inoltre necessario aggiungere il seguente codice di script. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

Aggiornamento 2019 : l'aggiunta type="text/babel"al tag script in cui sto importando il mio file JS e lo script Babel che @Steven ha menzionato nel commento sopra ha funzionato per me.

— Syknapse

128

AGGIORNA - usa questo invece:

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

Aggiungi type="text/jsx"come attributo del scripttag utilizzato per includere il file JavaScript che deve essere trasformato da JSX Transformer, in questo modo:

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

Quindi puoi usare MAMP o qualche altro servizio per ospitare la pagina su localhost in modo che tutte le inclusioni funzionino, come discusso qui .

Grazie per tutto l'aiuto a tutti!

— Kat
fonte

3

python -m SimpleHTTPServer 8080è comunemente usato perché non è necessario installare, eseguire e configurare un server persistente come apache.

— Brigante

3

Funziona perfettamente, ho appena aggiunto il text/jsxvalore dell'attributo

— William

27

JSTransform è deprecato , utilizza invece babel.

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

— Pumych
fonte

21

Aggiungi type="text/babel"come attributo del tag script, in questo modo:

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

— NAVIN SINGH BISHT
fonte

13

Aggiungi type="text/babel"allo script che include il file .jsx e aggiungi questo: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
fonte

3

Per la versione 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>come menzionato qui

— user3405291

4

Se hai qualcosa di simile

Uncaught SyntaxError: embedded: Unexpected token

Probabilmente ti sei perso una virgola in un posto come questo:

  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
fonte

2

Soluzione istantanea.)

— Zoltán

3

Il codice che hai è corretto. Il codice JSX deve essere compilato su JS:

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

— stewart715
fonte

provato, ora ricevo solo "Uncaught SyntaxError: Unexpected token ILLEGAL"

— kat

stai usando Chrome? ti dà un numero di riga e punta a un codice specifico?

— stewart715

male, non posso fare interruzioni di riga senza sfuggirle quindi devi concatele con +... aggiornato dovrebbe funzionare ora.

— stewart715

Ora ricevo questo: "Errore non rilevato: violazione invariante: ReactCompositeComponent.render (): deve essere restituito un ReactComponent valido. Potresti aver restituito undefined, un array o qualche altro oggetto non valido." sembra che una stringa non sia un componente di reazione valido

— kat

Ah, so cosa sta succedendo qui ... devi compilare il tuo codice di reazione jsx in javascript ... lo stai facendo o stai eseguendo direttamente nel browser?

— stewart715

3

Se ricevi un errore come questo:

SyntaxError: embedded: token imprevisto (107: 9) 105

Potrebbe essere che ti manchi una parentesi graffa

— Lord Darth Vader
fonte

1

Prova ad aggiungere in webpack, ha risolto il problema simile nel mio progetto. Specialmente la parte "preset".

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

— prabhatojha
fonte

0

Ho lo stesso problema con te e ho cambiato qualcosa nel mio server

potresti provare questo

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

— Dee Jee
fonte

La domanda originale non utilizzava express.js; potresti spiegare come si risolve il problema?

— Jonathan Rosa,