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

99

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

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

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

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

reactjs Сэм
источник

Ответы:

57

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

<script src="js/reactjs/main.js" type = "text/babel"></script>
Юлия Ашомок
источник
1
Правильно, используйте «text / babel» вместо «text / jsx». Ссылка на основной URL-адрес babel -> cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
Кент Агилар
30

ОБНОВИТЬ: в React 0.12+ прагма JSX больше не нужна.

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

/** @jsx React.DOM */

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

Софи Альперт
источник
10
Но <script type = "text / jsx"> это
xavier
4
используя babel, мне пришлось добавить type="text/babel". О дивный новый мир javascript
Коннор Лич
это помогло в моих обстоятельствах: stackoverflow.com/questions/33460420/…
timhc22
28

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

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

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

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

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

npm install babel-preset-react

Спасибо

Нува
источник
В вопросе нет ничего, что указывало бы на то, что исходный плакат использует babel.
ivarni 03
Он сказал, что только начинает с Reactjs, для React необходимо использовать предустановку babel. Может быть, в конфигурации webpack пропущена предустановка babel
Nuwa
В вопросе нет ничего, что указывало бы на то, что исходный плакат также использует веб-пакет. Ни то, ни другое не требуется для работы с React, хотя они оба удобны.
ivarni 03
4
@ Нува, спасибо. npm install babel-preset-reactрешил мою проблему.
Yasin
4
если у вас .babelrcв проекте есть файл только "presets": ["env", "react", "es2015"]и все !!
Байрон Лопес
21

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

<script type="text/jsx">
Шон М
источник
7

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

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

krs
источник
Да, я знаю, ниже обновленная ссылка на
sam
У этого jsbin, похоже, есть собственный способ выполнения JS, ошибка находится внутри их кода.
krs 03
Но это та же ошибка и с тем же номером строки. Кроме того, есть ли другая причина, по которой такая ошибка может произойти, если я использую тот же код, что указан в ссылке
sam
jsfiddle.net/9st5Q вот ваш код в jsfiddle, где React отлично работает.
krs 03
7
убедитесь, что вы установили тег type = "text / jsx" в <script type="text/jsx">теге, если хотите, вставьте весь свой код в вставку
hastebin.org
7

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

Руслан
источник
Вы также можете дать пояснение к своему ответу?
MMascarin
1
Я думаю, что когда вы указываете type = "text / jsx", вы используете компилятор, чтобы знать, какой это тип документа или файла.
Руслан
3

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

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

Мюсуф
источник
2

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

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
розовые вафли
источник
1

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

Кирилл Шур
источник
1

если рассматривать вашу реальную конфигурацию сайта, то вам нужно запустить 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')
);
Римский
источник
1

Используйте следующий код. Я добавил ссылку на React и React DOM. Используйте ES6 / Babel, чтобы превратить ваш JS-код в обычный JavaScript. Обратите внимание, что метод Render исходит из ReactDOM, и убедитесь, что у этого метода есть цель, указанная в 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'));

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

Абхай Широ
источник
1

Убедитесь, что .babelrc находится внутри корневой папки вашего приложения, а не внутри подпапки. в этом случае переместите файл в корневой каталог.

Эндрю Окесокун
источник
0

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

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.config.js):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
Виталий Андрусишин
источник
0

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

{
  "extends": "react-app",
  ...
}
Dferrazm
источник
0

Я только начал учиться 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()функции, все заработало нормально.

Сибиш Вену
источник
0

Вот еще один способ сделать это 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
источник
0

Хотя в моем конфигурационном файле .babelrc были все подходящие загрузчики babel. Этот сценарий сборки с parcel-bundler вызывал неожиданную ошибку токена <и ошибки типа mime в консоли браузера при обновлении страницы вручную.

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

Обновление скрипта сборки устранило проблемы для меня.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
Абхиджит
источник