ReactJS: «Неперехваченная ошибка SyntaxError: неожиданный токен <»

111

Я пытаюсь приступить к созданию сайта на ReactJS. Однако, когда я попытался поместить свой JS в отдельный файл, я начал получать эту ошибку: «Uncaught SyntaxError: Unexpected token <».

Я пробовал добавить /** @jsx React.DOM */в начало JS-файла, но ничего не исправил. Ниже представлены файлы HTML и JS. Есть идеи относительно того, что происходит не так?

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

РЕДАКТИРОВАТЬ: я понял, что мне нужно добавить type="text/jsx"тег скрипта, который включает мой код посадочного модуля. Однако после добавления этого и перезагрузки я получаю это предупреждение

«Вы используете преобразователь JSX в браузере. Не забудьте предварительно скомпилировать JSX для производства - http://facebook.github.io/react/docs/tooling-integration.html#jsx »

за которой следует эта ошибка:

«XMLHttpRequest не может загрузить файл: ///Users/.../lander.js. Запросы с перекрестным источником поддерживаются только для схем протокола: http, data, chrome-extension, https, chrome-extension-resource.»

похоже, что мне нужно сделать что-то еще, чтобы заставить работать преобразование jsx в браузере, но я не уверен, что это такое.

РЕДАКТИРОВАТЬ: ОООО, мне нужно разместить его с помощью MAMP или чего-то еще?

— Kat
источник

1

Как вы включаете свой "JS" файл?

— Квентин

1

Вам необходимо дополнительно добавить следующий код скрипта. <script src = " unpkg.com/@babel/standalone/babel.min.js" > </ script >

— Стивен

Обновление 2019 : добавление type="text/babel"в тег скрипта, куда я импортирую свой JS-файл, и скрипт Babel, который @Steven упомянул в комментарии выше, сработало для меня.

— Syknapse 01

131

ОБНОВЛЕНИЕ - используйте вместо этого:

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

Добавьте type="text/jsx"в качестве атрибута scriptтега, используемого для включения файла JavaScript, который должен быть преобразован JSX Transformer, например:

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

Затем вы можете использовать MAMP или какую-либо другую службу для размещения страницы на localhost, чтобы все включения работали, как описано здесь .

Спасибо всем за помощь!

— Kat
источник

3

python -m SimpleHTTPServer 8080обычно используется, потому что вам не нужно устанавливать, запускать и настраивать постоянный сервер, такой как apache.

— Brigand

3

Работает отлично, я только что добавил text/jsxзначение атрибута

— Уильям

27

JSTransform устарел , используйте вместо него babel.

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

— Пумыч
источник

21

Добавьте type="text/babel"как атрибут тега скрипта, например:

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

— NAVIN SINGH BISHT
источник

13

Добавьте type="text/babel"к скрипту, который включает файл .jsx, и добавьте это: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
источник

3

Для версии 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>как указано здесь

— user3405291 07

4

Если у вас есть что-то вроде

Uncaught SyntaxError: embedded: Unexpected token

Вероятно, вы пропустили запятую в таком месте:

  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
источник

2

Мгновенное решение.)

— Золтан

3

У вас правильный код. Код JSX необходимо скомпилировать в JS:

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

— stewart715
источник

попробовал, теперь я просто получаю "Uncaught SyntaxError: Unexpected token ILLEGAL"

— kat

ты используешь хром? он дает вам номер строки и указывает на конкретный код?

— stewart715

мой плохой, не могу делать разрывы строк, не экранируя их, поэтому вам нужно объединить их с +... обновленным, теперь должно работать.

— stewart715,

Теперь я получаю следующее: «Неперехваченная ошибка: инвариантное нарушение: ReactCompositeComponent.render (): должен быть возвращен действительный компонент ReactComponent. Возможно, вы вернули undefined, массив или другой недопустимый объект». кажется, что строка не является допустимым компонентом реакции

— kat

Ах, я знаю, что здесь происходит ... вам нужно скомпилировать свой код реакции jsx в javascript ... вы делаете это или работаете прямо в браузере?

— stewart715

3

Если вы получаете такую ошибку:

SyntaxError: embedded: неожиданный токен (107: 9) 105

Возможно, вам не хватает фигурной скобки

— Лорд Дарт Вейдер
источник

1

Попробуйте добавить в webpack, он решил аналогичную проблему в моем проекте. Особенно в части "предустановки".

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

— prabhatojha
источник

0

У меня такая же проблема с вами, и я что-то изменил на моем сервере

ты можешь попробовать это

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

— Ди Джи
источник

В исходном вопросе express.js не использовался; не могли бы вы объяснить, как это решить проблему?

— Джонатан Роза,