ReactJS: "Error de sintaxis no detectado: token inesperado <"

110

Estoy tratando de comenzar a construir un sitio en ReactJS. Sin embargo, cuando traté de poner mi JS en un archivo separado, comencé a recibir este error: "Error de sintaxis no detectado: token inesperado <".

Intenté agregar /** @jsx React.DOM */a la parte superior del archivo JS, pero no solucionó nada. A continuación se muestran los archivos HTML y JS. ¿Alguna idea de lo que va mal?

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

EDITAR: Me di cuenta de que necesito agregar type="text/jsx"a la etiqueta de script que incluye mi código de aterrizaje. Sin embargo, después de agregar esto y recargar, recibo esta advertencia

"Está utilizando el transformador JSX en el navegador. Asegúrese de precompilar su JSX para la producción: http://facebook.github.io/react/docs/tooling-integration.html#jsx "

seguido de este error:

"XMLHttpRequest no puede cargar el archivo: ///Users/.../lander.js. Las solicitudes de origen cruzado solo se admiten para esquemas de protocolo: http, data, chrome-extension, https, chrome-extension-resource".

parece que hay algo más que debo hacer para que funcione la transformación jsx del navegador, pero no estoy seguro de qué es.

EDITAR: OOOOH ¿necesito alojarlo usando MAMP o algo así?

— Kat
fuente

¿Cómo incluye su archivo "JS"?

— Quentin

1

Además, debe agregar el siguiente código de secuencia de comandos. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

Actualización de 2019 : agregar type="text/babel"a la etiqueta de script donde estoy importando mi archivo JS y el script de Babel que @Steven mencionó en el comentario anterior funcionó para mí.

— Syknapse

128

ACTUALIZAR - use esto en su lugar:

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

Agregue type="text/jsx"como atributo de la scriptetiqueta utilizada para incluir el archivo JavaScript que debe ser transformado por JSX Transformer, así:

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

Luego, puede usar MAMP o algún otro servicio para alojar la página en localhost para que todas las inclusiones funcionen, como se explica aquí .

¡Gracias a todos por la ayuda!

— Kat
fuente

3

python -m SimpleHTTPServer 8080se usa comúnmente porque no es necesario instalar, ejecutar y configurar un servidor persistente como apache.

— Brigand

3

Funciona perfectamente, acabo de agregar el text/jsxvalor del atributo

— William

27

JSTransform está obsoleto , utilice babel en su lugar.

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

— Pumych
fuente

21

Agregue type="text/babel"como un atributo de la etiqueta de secuencia de comandos, así:

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

— NAVIN SINGH BISHT
fuente

13

Agregue type="text/babel"al script que incluye el archivo .jsx y agregue esto: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
fuente

3

Para la versión 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>como se menciona aquí

— user3405291

4

Si tienes algo como

Uncaught SyntaxError: embedded: Unexpected token

Probablemente te perdiste una coma en un lugar como este:

  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
fuente

2

Solución instantánea.)

— Zoltán

3

El código que tienes es correcto. El código JSX debe compilarse en JS:

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

— stewart715
fuente

lo probé, ahora solo obtengo "Error de sintaxis no detectado: token inesperado ILEGAL"

— kat

estás usando Chrome? ¿Le da un número de línea y apunta a un código específico?

— stewart715

mi mal, no puedo hacer saltos de línea sin escapar de ellos, por lo que debe concanearlos con +... actualizado debería funcionar ahora.

— stewart715

Ahora recibo esto: "Error no detectado: Violación invariante: ReactCompositeComponent.render (): Debe devolverse un ReactComponent válido. Es posible que haya devuelto undefined, una matriz o algún otro objeto no válido". parece que una cadena no es un componente de reacción válido

— kat

Ah, sé lo que está pasando aquí ... necesitas compilar tu código de reacción jsx en javascript ... ¿lo estás haciendo o ejecutando directamente en el navegador?

— stewart715

3

Si recibe un error como este:

SyntaxError: incrustado: token inesperado (107: 9) 105

Podría ser que te falte un corchete

— Lord Darth Vader
fuente

1

Intente agregar un paquete web, resolvió un problema similar en mi proyecto. Especialmente la parte de "presets".

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

— prabhatojha
fuente

0

Tengo el mismo problema contigo y he cambiado algo en mi servidor

podrías intentar esto

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

— Dee Jee
fuente

La pregunta original no utilizó express.js; ¿Puede explicar cómo soluciona esto el problema?

— Jonathan Rosa