ReactJS: “Uncaught SyntaxError: Unexpected token <”

110

Estou tentando começar a construir um site no ReactJS. No entanto, quando tentei colocar meu JS em um arquivo separado, comecei a receber este erro: "Uncaught SyntaxError: Unexpected token <".

Tentei adicionar /** @jsx React.DOM */no início do arquivo JS, mas não corrigiu nada. Abaixo estão os arquivos HTML e JS. Alguma ideia do que está errado?

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: Percebi que preciso adicionar type="text/jsx"a tag de script que inclui meu código do módulo de pouso. No entanto, depois de adicionar isso e recarregar, recebo este aviso

"Você está usando o transformador JSX no navegador. Certifique-se de pré-compilar seu JSX para produção - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

seguido por este erro:

"XMLHttpRequest não pode carregar arquivo: ///Users/.../lander.js. Solicitações de origem cruzada são compatíveis apenas com esquemas de protocolo: http, dados, chrome-extension, https, chrome-extension-resource."

parece que há algo mais que preciso fazer para que a transformação jsx do navegador funcione, mas não tenho certeza do que é.

EDIT: OOOOH eu preciso hospedá-lo usando MAMP ou algo assim?

javascript html reactjs react-jsx kat
fonte
Como você está incluindo seu arquivo "JS"?
Quentin
1
Você também precisa adicionar o seguinte código de script. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >
Steven
Atualização de 2019 : Adicionar type="text/babel"à tag de script onde estou importando meu arquivo JS e o script Babel que @Steven mencionou no comentário acima funcionou para mim.
Syknapse 01 de

Respostas:

128

ATUALIZAR - use este:

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

Adicione type="text/jsx"como um atributo da scripttag usada para incluir o arquivo JavaScript que deve ser transformado pelo JSX Transformer, assim:

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

Em seguida, você pode usar o MAMP ou algum outro serviço para hospedar a página no localhost para que todas as inclusões funcionem, conforme discutido aqui .

Obrigado por toda a ajuda a todos!

kat
fonte
3
python -m SimpleHTTPServer 8080é comumente usado porque você não precisa instalar, executar e configurar um servidor persistente como o apache.
Brigand
3
Funciona perfeitamente, acabei de adicionar o text/jsxvalor do atributo
William
27

JSTransform está obsoleto , use o babel em seu lugar.

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

Adicione type="text/babel"como um atributo da tag de script, assim:

<script type="text/babel" src="./lander.js"></script>
NAVIN SINGH BISHT
fonte
13

Adicione type="text/babel"ao script que inclui o arquivo .jsx e adicione este: <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

AlexGH
fonte
3
Para a versão 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>conforme mencionado aqui
user3405291
4

Se você tem algo como

Uncaught SyntaxError: embedded: Unexpected token

Você provavelmente perdeu uma vírgula em um 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
fonte
2
Solução instantânea.)
Zoltán
3

O código que você tem está correto. O código JSX precisa ser compilado para JS:

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

Stewart715
fonte
tentei, agora estou recebendo "Uncaught SyntaxError: Unexpected token ILEGAL"
kat
você está usando o cromo? fornece um número de linha e aponta para um código específico?
stewart715
meu mal, não posso fazer quebras de linha sem escapá-los então você precisa concatá-los com +... atualizado deve funcionar agora.
stewart715
Agora estou recebendo o seguinte: "Erro não detectado: Violação invariável: ReactCompositeComponent.render (): Um ReactComponent válido deve ser retornado. Você pode ter retornado indefinido, uma matriz ou algum outro objeto inválido." parece que uma string não é um componente de reação válido
kat
Ah, eu sei o que está acontecendo aqui ... você precisa compilar seu código jsx react em javascript ... você está fazendo isso ou executando diretamente no navegador?
stewart715
3

Se você estiver recebendo um erro como este:

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

Pode ser que esteja faltando uma chave

Lord Darth Vader
fonte
1

Tente adicionar o webpack, ele resolveu o problema semelhante no meu projeto. Especialmente a parte "predefinições".

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

Tenho o mesmo problema com você e mudei algo no meu servidor

você pode tentar isso

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});
Dee Jee
fonte
A pergunta original não usava express.js; você pode explicar como isso corrige o problema?
Jonathan Rosa