Вопрос:

Reactjs: Неожиданный токен '<' Ошибка

reactjs

82990 просмотра

15 ответа

359 Репутация автора

Я только начинаю с Reactjs и писал простой компонент для отображения
liтега и наткнулся на эту ошибку:

Неожиданный токен '<'

Я привел пример в jsbin ниже http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Пожалуйста, дайте мне знать, что я делаю неправильно.

Автор: sam Источник Размещён: 03.01.2014 01:54

Ответы (15)


7 плюса

3042 Репутация автора

Вам нужно либо перевести / скомпилировать этот код JSX в javascript, либо использовать встроенный в браузер

Посмотрите на http://facebook.github.io/react/docs/getting-started.html и обратите внимание на <script>теги, вам нужны те, которые включены для JSX для работы в браузере.

Автор: krs Размещён: 03.01.2014 02:03

29 плюса

94194 Репутация автора

UPDATE: в React 0.12+ прагма JSX больше не нужна.


Убедитесь, что прагма JSX находится в верхней части ваших файлов:

/** @jsx React.DOM */

Без этой строки jsxдвоичный и встроенный в браузер трансформаторы оставят ваши файлы без изменений.

Автор: Sophie Alpert Размещён: 03.01.2014 10:18

2 плюса

5833 Репутация автора

Вот рабочий пример из 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>

Запустите этот код из одного файла, и ваш он должен работать.

Автор: myusuf Размещён: 01.05.2014 07:13

17 плюса

962 Репутация автора

в моем случае я не смог включить атрибут type в свой тег скрипта.

<script type="text/jsx">
Автор: Sean McMills Размещён: 22.08.2015 05:06

32 плюса

3804 Репутация автора

Я решил это с помощью type = "text / babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>
Автор: Yuliia Ashomok Размещён: 02.11.2015 03:46

17 плюса

171 Репутация автора

Проблема Неожиданный токен «<» вызван отсутствием предустановки Babel.

Решение. Вы должны настроить конфигурацию вашего веб-пакета следующим образом.

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

здесь .jsx проверяет форматы .js и .jsx.

вы можете просто установить зависимость babel с помощью узла следующим образом

npm install babel-preset-react

Спасибо

Автор: Nuwa Размещён: 03.06.2016 07:07

1 плюс

212 Репутация автора

Для правильного разбора тегов вам необходимо использовать эту версию babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js и атрибут "type = 'text / babel'" в скрипте. Кроме того, ваш собственный скрипт должен быть в тегах body.

Автор: Kirill Shur Размещён: 06.09.2016 07:22

0 плюса

1151 Репутация автора

Вы можете использовать такой код:

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

И не забудьте добавить <div id='main-content'></div>в bodyв вашемhtml

Но в вашем файле package.json вы должны использовать эти зависимости:

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

Это работа для меня, но я также использовал webpack, с этими параметрами (в 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 Размещён: 15.01.2017 10:53

0 плюса

171 Репутация автора

В моем случае, помимо babelпресетов, мне также пришлось добавить это к моему .eslintrc:

{
  "extends": "react-app",
  ...
}
Автор: dferrazm Размещён: 06.02.2017 01:52

1 плюс

2398 Репутация автора

если мы рассмотрим вашу реальную конфигурацию сайта, вам нужно запустить ReactJS в голове

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

и добавьте атрибут в файл js - type = "text / babel", например

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

то пример ниже кода будет работать:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
); 
Автор: Roman Размещён: 24.02.2017 07:46

1 плюс

804 Репутация автора

Используйте следующий код. Я добавил ссылку на React and React DOM. Используйте ES6 / Babel, чтобы преобразовать JS-код в ванильный JavaScript. Обратите внимание, что метод Render поступает из ReactDOM и гарантирует, что метод render имеет цель, указанную в DOM. Иногда может возникнуть проблема с тем, что метод render () не может найти целевой элемент. Это происходит из-за того, что код выполнения выполняется до отображения DOM. Чтобы противостоять этому, используйте jQuery ready (), чтобы вызвать метод render () для React. Таким образом вы будете уверены в том, что DOM будет отображаться первым. Вы также можете использовать атрибут defer в своем скрипте приложения.

Код 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>

Код JS:

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

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

Надеюсь, это решит вашу проблему. :-)

Автор: Abhay Shiro Размещён: 04.09.2017 06:02

2 плюса

160 Репутация автора

У меня есть эта ошибка, и я не мог решить это в течение двух дней. Поэтому исправление ошибки очень простое. В теле, где вы подключаете свой script, добавьте, type="text/jsx"и это разрешит проблему.

Автор: Руслан Размещён: 29.11.2017 01:36

0 плюса

152 Репутация автора

Если вы похожи на меня и склонны к глупым ошибкам, также проверьте свой пакет. Json, если он содержит вашу настройку Babel:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
Автор: pinkwaffles Размещён: 14.06.2018 02:05

0 плюса

4858 Репутация автора

Я только начал учиться Reactсегодня и столкнулся с одной и той же проблемой. Ниже приведен код, который я написал.

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

И как вы можете видеть, я пропустил запятую (,) после того, как я использую <Hello/>. И сама ошибка говорит о том, какую строку нам нужно искать.

введите описание изображения здесь

Поэтому, когда я добавляю запятую перед вторым параметром для ReactDOM.render()функции, все начинает работать нормально.

Автор: Sibeesh Venu Размещён: 08.10.2018 12:33

0 плюса

29 Репутация автора

heres другим способом вы можете сделать это html

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

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

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

</html>

файл index.js с помощью пути 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"));

используйте этот пакет. json быстро запустится и работает

{
  "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 Braganca Размещён: 06.12.2018 07:35
Вопросы из категории :
32x32