Uncaught SyntaxError: Неожиданный токен в импорте React из'act ' - PullRequest
Новая
       0

Uncaught SyntaxError: Неожиданный токен в импорте React из'act '

0 голосов
/ 03 марта 2019

Раньше я писал приложение «Реагировать» с помощью команды «создать-реакция-приложение», и проблем не было.Однако я попытался создать небольшое приложение, используя только index.html и app.js.Ошибки были подняты в Chrome до import и JSX.Для import, Uncaught SyntaxError: Unexpected token Для JSX Uncaught SyntaxError: Unexpected token < Это потому, что я не установил BABEL или ES6.

Я пытался установить babel, но он все равно не работал.Я также попытался добавить type="text/babel"

index.html 

<!Doctype html>
<html>

<head>
    <title>Social Card</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>content fahafafafaddha</h1>
    <div id="root">
    </div>
    <script src= "app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>

app.js 

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
    <h1> Hello</h1>,
    document.getElementById('root')
)

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Порядок ваших <script> тегов важен.Они загружаются в порядке их появления.Итак, ваш app.js должен прийти после babel и отреагировать: 

<div id="root"></div>

<!-- DEPENDENCIES MUST COME FIRST -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- Your scripts -->
<script type="text/babel">
    const App = () => <h1>Hello React!</h1>;
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

Далее вы не можете использовать операторы import при включении ваших зависимостей только с тегами сценария.Они просто будут доступны в глобальном пространстве имен.Вы также можете использовать модули при указании атрибута type="module" в тегах скрипта, но эта функция была добавлена ​​только недавно и может не поддерживаться процентом используемых в настоящее время версий браузера.

0 голосов
/ 03 марта 2019

Ошибка определенно связана с тем, что ваш код не был передан (что и делает Babel).Вы говорите, что установили babel .. что вы имеете в виду под этим?Вам необходимо настроить babel таким образом, чтобы он передавал ваш код перед запуском.create-реакции-приложение делает это за вас, используя веб-пакет для переноса, объединения и минимизации вашего кода.

Если вы хотите узнать больше о специфике работы и настройке приложения, создайтеновое приложение create-реагировать, а затем запустить

npm run eject

Это приведет к удалению всех ранее скрытых конфигураций и поможет вам понять, как все работает.

ОБНОВЛЕНИЕ

Одна вещь, которую вы можете попробовать, - это установить все babel-cli с помощью 

npm install --save-dev @babel/core @babel/cli

, а затем использовать его как 

npx babel app.js --out-file app-compiled.js

и используйте app-compiled для запуска сервера.

ОБНОВЛЕНИЕ 2

Вы используете синтаксис ES6 (операторы импорта), а также JSX (с использованием HTML-кода)в файле JavaScript).Этот код не может быть скомпилирован непосредственно JS-компилятором, и поэтому он показывает вышеуказанную ошибку.Чтобы это исправить, вам нужно перенести его в JS, который может быть прочитан браузером.Есть несколько способов сделать это, некоторые из которых:

  • Использование веб-пакета для переноса, минимизации, объединения и внедрения вашего кода в html.

  • Используйте babel-cli для переноса кода вручную, а затем вместо этого импортируйте перенесенный файл

  • Используйте автономную версию babel, как объяснено здесь

Что касается того, что я имел в виду, используя app-compiled, я имел в виду включить выходной файл из команды babel-cli (app-compile.js, если вы выполнили команду, которую я написал выше) в html вместо app.js

...