Reactjs: Token inesperado '<' Erro

99

Estou apenas começando com Reactjs e estava escrevendo um componente simples para exibir a
litag e me deparei com este erro:

Token inesperado '<'

Coloquei o exemplo em jsbin abaixo de http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Por favor, deixe-me saber o que estou fazendo de errado.

reactjs sam
fonte

Respostas:

56

Resolvi usando type = "text / babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>
Yuliia Ashomok
fonte
1
Correto, use "text / babel" ao invés de "text / jsx". Consulte o
Kent Aguilar
30

ATUALIZAÇÃO: No React 0.12+, o pragma JSX não é mais necessário.

Certifique-se de incluir o pragma JSX na parte superior de seus arquivos:

/** @jsx React.DOM */

Sem esta linha, o jsxbinário e o transformador no navegador deixarão seus arquivos inalterados.

Sophie Alpert
fonte
10
Mas <script type = "text / jsx"> é
xavier
4
usando babel eu tive que jogar type="text/babel". Admirável mundo novo de javascript
Connor Leech
isso ajudou nas minhas circunstâncias: stackoverflow.com/questions/33460420/…
timhc22
28

O problema de token inesperado '<' é devido à falta da predefinição de babel.

Solução: Você deve definir a configuração do seu webpack da seguinte forma

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

aqui .jsx verifica os formatos .js e .jsx.

você pode simplesmente instalar a dependência do babel usando o node como segue

npm install babel-preset-react

Obrigado

Nuwa
fonte
Não há nada na pergunta que indique que o autor da postagem original está usando babel.
ivarni
Ele disse que está apenas começando com Reactjs, para Reagir babel predefinido tem que ser use.May ser a configuração Webpack perdeu o preset babel
Nuwa
Não há nada na pergunta que indique que o autor da postagem original também está usando o webpack. Nenhum deles é necessário para trabalhar com o React, embora ambos sejam úteis.
ivarni
4
@Nuwa obrigado. npm install babel-preset-reactresolveu meu problema.
Yasin Yörük
4
se tem .babelrcarquivo no projeto é só "presets": ["env", "react", "es2015"]e pronto !!
Byron Lopez
21

no meu caso, não incluí o atributo type na minha tag de script.

<script type="text/jsx">
Sean M
fonte
7

Você precisa transpilar / compilar esse código JSX para javascript ou usar o transformador no navegador

Veja http://facebook.github.io/react/docs/getting-started.html e anote as <script>tags, você precisa delas incluídas para que o JSX funcione no navegador.

krs
fonte
Sim, eu sei, abaixo está o link do
sam
Esse jsbin parece ter sua própria maneira de executar o JS, o erro é de dentro do código deles.
krs
Mas é o mesmo erro e com o mesmo número de linha. Além disso, há algum outro motivo para tal erro acontecer se eu estiver usando o mesmo código fornecido no link
sam
jsfiddle.net/9st5Q aqui está seu código em um jsfiddle, onde React funciona bem.
krs
7
certifique-se de definir o tipo = "text / jsx" na <script type="text/jsx">tag, se quiser, cole todo o código em uma pasta hastebin.org
krs
7

Eu tenho esse erro e não consegui resolver por dois dias. Portanto, a correção do erro é muito simples. No corpo, onde você conecta o seu script, adicione type="text/jsx"e isso resolverá o problema.

Руслан
fonte
você também pode dar uma explicação para sua resposta?
MMascarin de
1
Acho que quando você fornece type = "text / jsx", você usa o compilador para saber que tipo de documento ou arquivo é esse.
Руслан
3

Aqui está um exemplo prático do seu jsbin:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

jsx:

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

Execute este código a partir de um único arquivo e ele deve funcionar.

myusuf
fonte
2

Se você é como eu e está sujeito a erros bobos, verifique também se o seu package.json contém a sua predefinição do babel:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
waffles rosa
fonte
1

se considerarmos a configuração do seu site real, você precisará executar o ReactJS na cabeça

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

e adicione o atributo ao seu arquivo js - type = "text / babel" como

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

então o exemplo de código abaixo funcionará:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
romano
fonte
1

Use o seguinte código. Eu adicionei referências a React e React DOM. Use ES6 / Babel para transformar seu código JS em JavaScript vanilla. Observe que o método Render vem do ReactDOM e certifique-se de que o método render tenha um destino especificado no DOM. Às vezes, você pode enfrentar o problema de que o método render () não consegue encontrar o elemento de destino. Isso acontece porque o código de reação é executado antes da renderização do DOM. Para combater isso, use jQuery ready () para chamar o método render () do React. Dessa forma, você terá certeza de que o DOM será renderizado primeiro. Você também pode usar o atributo defer em seu script de aplicativo.

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>

</body>
</html>

Código JS:

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

Espero que isso resolva seu problema. :-)

Abhay Shiro
fonte
1

Verifique se .babelrc está dentro da pasta raiz do aplicativo, não dentro de uma subpasta. se for esse o caso, mova o arquivo para a raiz.

Andrew Okesokun
fonte
0

Você pode usar um código como este:

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

E não se esqueça add <div id='main-content'></div>na bodysuahtml

Mas em seu arquivo package.json, você deve usar estas dependências:

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

Funciona para mim, mas também usei o webpack, com estas opções (em webpack.config.js):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
Vitaliy Andrusishyn
fonte
0

No meu caso, além das babelpredefinições, também tive que adicionar isto ao meu .eslintrc:

{
  "extends": "react-app",
  ...
}
dferrazm
fonte
0

Comecei a aprender Reacthoje e estava enfrentando o mesmo problema. Abaixo está o código que escrevi.

<script type="text/babel">
    class Hello extends React.Component {
        render(){
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
    ReactDOM.render(
        <Hello/>
        document.getElementById('react-container')
    )


</script>

E como você pode ver, perdi uma vírgula (,) depois de usar <Hello/>. E o próprio erro está dizendo em qual linha devemos olhar.

insira a descrição da imagem aqui

Assim, depois de adicionar uma vírgula antes do segundo parâmetro da ReactDOM.render()função, tudo começou a funcionar bem.

Sibeesh Venu
fonte
0

aqui está outra maneira de fazer isso html 

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

arquivo index.js com caminho src / index.js

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

use este package.json para colocá-lo em funcionamento rapidamente

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}
Snivio
fonte
0

Embora eu tivesse todos os carregadores de babel adequados em meu arquivo de configuração .babelrc. Este script de construção com parcel-bundler estava produzindo o erro inesperado de token <e erros de tipo mime no console do navegador para mim na atualização da página manual.

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

Atualizar o script de construção corrigiu os problemas para mim.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
Abhijeet
fonte