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í?

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

Respuestas:

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/[email protected]/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