ReactJS: "Uncaught SyntaxError: Несподіваний маркер <"

110

Я намагаюся розпочати створення сайту в ReactJS. Однак, коли я намагався помістити свій JS в окремий файл, я почав отримувати цю помилку: "Uncaught SyntaxError: Несподіваний маркер <".

Я спробував додати /** @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>
        );
    }
});

EDIT: Я зрозумів, що мені потрібно додати 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 на роботу, але я не впевнений, що це таке.

EDIT: OOOOH мені потрібно розмістити його за допомогою MAMP чи чогось іншого?

— кат
джерело

Як ви включаєте файл "JS"?

— Квентін

1

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

— Стівен

Оновлення 2019 року : додавання type="text/babel"до тегу сценарію, куди я імпортую свій файл JS та сценарій Babel, який @Steven, зазначений у коментарі вище, працював на мене.

— Syknapse

128

ОНОВЛЕННЯ - використовуйте це замість:

<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, щоб усі включення працювали, як обговорювалося тут .

Дякую за всю допомогу всім!

— кат
джерело

3

python -m SimpleHTTPServer 8080зазвичай використовується, тому що вам не потрібно встановлювати, запускати та конфігурувати стійкий сервер, наприклад apache.

— Бриганд

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>

— НАВІН СІНГ БІШ
джерело

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

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: Неочікуваний маркер НЕЗАКОННИЙ"

— kat

ти використовуєш хром? він дає вам номер рядка та вказує на конкретний код?

— stewart715

мій поганий, не можу робити перерви рядків, не уникаючи їх, тому вам потрібно присвоїти їх +... оновлення має працювати зараз.

— stewart715

Тепер я отримую це: "Неприхована помилка: Інваріантне порушення: ReactCompositeComponent.render (): Потрібно повернути дійсний ReactComponent. Можливо, ви повернули невизначений, масив чи інший недійсний об'єкт." здається, що рядок не є дійсним компонентом реакції

— kat

Ах, я знаю, що тут відбувається ... вам потрібно скласти код jsx react у javascript ... ви це робите чи працюєте безпосередньо у браузері?

— stewart715

3

Якщо ви отримуєте помилку, як це:

SyntaxError: embedded: Несподіваний маркер (107: 9) 105

Можливо, вам не вистачає фігурної дужки

— Лорд Дарт Вейдер
джерело

1

Спробуйте додати в webpack, це вирішило аналогічну проблему в моєму проекті. Особливо "пресетів" частина.

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

— прабхатоха
джерело

0

У мене те саме питання з вами, і я щось змінив на своєму сервері

ви можете спробувати це

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

— Ді Джи
джерело

Оригінальне запитання не використовувало express.js; Ви можете пояснити, як це вирішує проблему?

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