Reactjs: token inesperado '<' Error

Respuestas:

56

Lo resolví usando type = "text / babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>
Yuliia Ashomok
fuente
1
Eso es correcto, use "text / babel" en lugar de "text / jsx". Haga
Kent Aguilar
30

ACTUALIZACIÓN: En React 0.12+, el pragma JSX ya no es necesario.

Asegúrese de incluir el pragma JSX en la parte superior de sus archivos:

/** @jsx React.DOM */

Sin esta línea, el jsxtransformador binario y en el navegador dejará sus archivos sin cambios.

Sophie Alpert
fuente
10
Pero <script type = "text / jsx"> es
xavier
4
usando babel tuve que tirar type="text/babel". Brave new world of javascript
Connor Leech
esto ayudó en mis circunstancias: stackoverflow.com/questions/33460420/…
timhc22
28

El problema Unexpected token '<' se debe a que falta el ajuste preestablecido de babel.

Solución: debe configurar la configuración de su paquete web de la siguiente manera

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

aquí .jsx comprueba los formatos .js y .jsx.

simplemente puede instalar la dependencia de babel usando el nodo de la siguiente manera

npm install babel-preset-react

Gracias

Nuwa
fuente
No hay nada en la pregunta que indique que el póster original usa babel.
ivarni
Dijo que recién está comenzando con Reactjs, para React babel preset tiene que ser utilizado. Puede ser que la configuración del paquete web no haya incluido el preset de babel
Nuwa
Tampoco hay nada en la pregunta que indique que el póster original está usando el paquete web. Ninguno de los dos es necesario para trabajar con React, aunque ambos son útiles.
ivarni
4
@Nuwa gracias. npm install babel-preset-reactresolvió mi problema.
Yasin Yörük
4
si tiene un .babelrcarchivo en el proyecto "presets": ["env", "react", "es2015"]y eso es todo !!
Byron Lopez
21

en mi caso, no pude incluir el atributo de tipo en mi etiqueta de script.

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

Necesita transpilar / compilar ese código JSX a javascript o usar el transformador en el navegador

Mire http://facebook.github.io/react/docs/getting-started.html y tome nota de las <script>etiquetas, las necesita para que JSX funcione en el navegador.

krs
fuente
Sí, lo sé, a continuación se muestra el enlace
sam
Ese jsbin parece tener su propia forma de ejecutar JS, el error proviene de su código.
krs
Pero es el mismo error y el mismo número de línea. Además, ¿hay alguna otra razón por la que ocurra un error de este tipo si estoy usando el mismo código que se proporciona en el enlace
Sam
jsfiddle.net/9st5Q aquí está su código en un jsfiddle, donde React funciona bien.
krs
7
asegúrese de configurar el tipo = "text / jsx" en la <script type="text/jsx">etiqueta, si lo desea, pegue todo el código en un archivo hastebin.org
krs
7

Tengo este error y no pude resolverlo durante dos días, por lo que la solución del error es muy simple. En el cuerpo, donde conecte su script, agregue type="text/jsx"y esto resolverá el problema.

Руслан
fuente
¿También puede dar una explicación de su respuesta?
MMascarin
1
Creo que cuando le das type = "text / jsx" usaste el compilador para saber qué tipo de documento o archivo es.
Руслан
3

Aquí hay un ejemplo de trabajo de su 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>

Ejecute este código desde un solo archivo y debería funcionar.

myusuf
fuente
2

Si eres como yo y eres propenso a cometer errores tontos, también revisa tu package.json si contiene tu preset de babel:

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

si consideramos la configuración de su sitio real, entonces necesita ejecutar ReactJS en la cabeza

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

y agregue un atributo a su archivo js - escriba = "text / babel" como

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

entonces el siguiente ejemplo de código funcionará:

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

Utilice el siguiente código. He agregado una referencia a React y React DOM. Utilice ES6 / Babel para transformar su código JS en JavaScript vanilla. Tenga en cuenta que el método Render proviene de ReactDOM y asegúrese de que el método render tenga un objetivo especificado en el DOM. A veces, es posible que tenga un problema de que el método render () no puede encontrar el elemento de destino. Esto sucede porque el código de reacción se ejecuta antes de que se procese el DOM. Para contrarrestar esto, use jQuery ready () para llamar al método render () de React. De esta manera, se asegurará de que DOM se procese primero. También puede utilizar el atributo defer en el script de su aplicación.

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 esto resuelva tu problema. :-)

Abhay Shiro
fuente
1

Compruebe si .babelrc está dentro de la carpeta raíz de su aplicación, no dentro de una subcarpeta. si ese es el caso, mueva el archivo a la raíz.

Andrew Okesokun
fuente
0

Puedes usar un 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'));

Y no se olvide de añadir <div id='main-content'></div>en el bodyen suhtml

Pero en su archivo package.json debe usar estas dependencias:

  "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",
...
}

Es un trabajo para mí, pero también usé webpack, con estas opciones (en 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
fuente
0

En mi caso, además de los babelajustes preestablecidos, también tuve que agregar esto a mi .eslintrc:

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

ReactHoy comencé a aprender y me enfrentaba al mismo problema. A continuación se muestra el código que había escrito.

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

Y como puede ver, me perdí una coma (,) después de usar <Hello/>. Y el error en sí mismo es decir en qué línea debemos mirar.

ingrese la descripción de la imagen aquí

Entonces, una vez que agrego una coma antes del segundo parámetro para la ReactDOM.render()función, todo comenzó a funcionar bien.

Sibeesh Venu
fuente
0

aquí hay otra forma en que puedes hacerlo html 

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

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

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

</html>

archivo index.js con ruta 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 lo pondrá en funcionamiento rápidamente

{
  "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
fuente
0

Aunque, tenía todos los cargadores de babel adecuados en mi archivo de configuración .babelrc. Este script de compilación con parcel-bundler estaba produciendo el error de token inesperado <y errores de tipo mime en la consola del navegador para mí en la actualización manual de la página.

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

La actualización del script de compilación solucionó los problemas.

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