Сборка Create-React-App - "Uncaught SyntaxError: Неожиданный токен <"

Question

Сборка Create-React-App - "Uncaught SyntaxError: Неожиданный токен <"

Я понимаю, что этот вопрос задавался несколько раз, но у меня ничего не получалось...

Я пытаюсь создать статическую сборку create-react-app проект, но я получаю следующие ошибки:

Uncaught SyntaxError: Unexpected token <     1.ca81c833.chunk.js:1
Uncaught SyntaxError: Unexpected token <     main.7ced8661.chunk.js:1

Из-за того, что эти файлы минимизированы, я не уверен, с чего начать их отладку.

Для других ответов SO, вот некоторые вещи, которые я пробовал:

//Original index.html file, which gets included in the built file:
<script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

//package.json
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

//.babelrc file
{
  "presets": ["react", "es2015", "stage-1"]
}

Не уверен, что это актуально, но у меня есть это на моем экспресс-сервере, который я считаю стандартным:

if (process.env.NODE_ENV === "production") {

    app.use(express.static('client/built'));
    app.get("*", (req, res) => {
        res.sendFile(require('path')
            .resolve(__dirname, 'client', 'build', 'index.html'));
    })
}

Предполагая, что это на самом деле проблема JSX, все это очень запутанно - не должно create-react-app обрабатывать JSX автоматически?

ОБНОВЛЕНИЕ: я только что отправил этот вопрос, но уже есть соответствующее обновление. Я могу обслуживать страницу статически через pm2, запустив pm2 serve build поэтому я думаю, что проблема может быть с моей конфигурацией сервера.

73

reactjs webpack jsx create-react-app

Источник

user6182971 24 янв '19 в 06:01

12 ответов

Другие вопросы по тегам reactjs webpack jsx create-react-app

user9412016 13 фев '19 в 09:33 2019-02-13 09:33 · Answer 1 · 2019-02-13 09:33

Спасибо, это мне очень помогло. Просто хочу добавить к этому пример из проекта Create-React-App, у которого было то же решение: я получил ту же ошибку после развертывания на heroku.

Uncaught SyntaxError: Неожиданный токен <после сборки serve -s

Для меня проблема была в файле packages.json. Параметр "homepage", который я дал, был неверным. Изменение правильного URL героя решило проблему.

"homepage": "https://myapp.herokuapp.com/"

Надеюсь, это дополнение полезно.

user6182971 26 янв '19 в 04:00 2019-01-26 04:00 · Answer 2 · 2019-01-26 04:00

В итоге я нашел ответ здесь: https://github.com/facebook/create-react-app/issues/1812

Я обрезал полное решение сверху, но я изменил:

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

чтобы:

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

Мне определенно немного странно, что первый блок не работал. Я предполагаю, что это как-то связано с относительными ссылками в моем проекте React, так как я получаю index.html файл доставлен в браузер, несмотря на получение ошибки. Возможно, полностью статический файл будет работать с первым блоком, но мне было бы интересно узнать, верно ли это.

user7765900 16 дек '19 в 21:27 2019-12-16 21:27 · Answer 3 · 2019-12-16 21:27

Просто удали

"домашняя страница": "URL вашего приложения"

из package.json, чтобы исправить это

36

Источник

user7765900 16 дек '19 в 21:27

user7344164 20 авг '20 в 08:38 2020-08-20 08:38 · Answer 4 · 2020-08-20 08:38

Просто чтобы добавить к ответу @Shashwat Gupta. Удалить"homepage": "app-url"из package.json. Отсутствиеhomepage в package.json будет предполагать, что он будет размещен в корне сервера, или вы будете обслуживать сборку с serve -s build.

Вы можете увидеть ниже изображение сообщений сборки после удаления homepage.

сборка пряжи

Выход

И да, указав homepage будет полезно, когда вы собираетесь развернуть приложение в подкаталоге корня сервера.

user11216153 14 июн '19 в 12:07 2019-06-14 12:07 · Answer 5 · 2019-06-14 12:07

Я создал версию сборки приложения React, используя "npm run build". Имею сервер (узел / экспресс). Я хотел включить сборку на стороне сервера и развернуть ее на heroku. Я скопировал папку сборки в корневую папку сервера и использовал код в файле запуска на стороне сервера:

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

Я получал ту же ошибку. Поэтому я просто установил путь для статического содержимого при запуске:

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

И мой статический index.html работал нормально и смог найти ресурсы css и js.

user13099086 24 авг '20 в 16:06 2020-08-24 16:06 · Answer 6 · 2020-08-24 16:06

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

Я не копировал папку static внутри build на сервер, потому что я использовал scp build/* скопировать папку сборки вместо scp -r build/*.

Я понимаю, что это не точный ответ на заданный здесь вопрос. Но я перепробовал почти все возможные варианты из ответов, данных здесь экспертами, прежде чем заметил ошибку, которую делал. Следовательно, добавляем это здесь как указатель на всех, кто сталкивается с подобной проблемой, чтобы также проверить шаги развертывания.

user8431734 04 май '20 в 20:46 2020-05-04 20:46 · Answer 7 · 2020-05-04 20:46

Возникла та же проблема, когда я хочу развернуть статическую сборку create-react-app проект на мой Linux-сервер.

Я решил эту проблему, прокомментировав cra's github и официальный документ cra о том, как развернуть производственную сборку.

Например:

Я хочу разместить веб-сайт производственной сборки примерно как http://example.com/foo/bar.

Когда я выполняю развертывание без изменения каких-либо настроек по умолчанию, я получаю сообщение об ошибке "Uncaught SyntaxError: Unexpected token <", и на экране ничего не отображается.

Вот решение:

1) Добавьте параметр домашней страницы в свой package.json.

+ "homepage": "/foo/bar"

2) Добавьте "/foo/bar" ко всем вашим статическим ресурсам в css, что будет примерно таким:

.dummyimage {
 - content: url('/dummyimage.jpg');
 + content: url('/foo/bar/dummyimage.jpg');
}

3) Добавьте "/foo/bar" ко всем своим ссылкам и маршрутам.

- linkTo: '/contact'
+ linkTo: '/foo/bar/contact'

4) Немного изменив код вашей программы обслуживания, в node.js/express это будет примерно так:

- app.use(express.static(path.join(__dirname, '/build')));
+ app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

5) Строим заново.

6) Развернуть сборку / на сервер.

7) Перезапустите свою программу подачи, например node.js/express.

Задача решена!!

Надеюсь, это решение поможет.

user3462686 04 янв '22 в 06:49 2022-01-04 06:49 · Answer 8 · 2022-01-04 06:49

Просто удалите домашнюю страницу в package.jsonа также не забудьте удалить basenameв BrowserRouter, если вы используете реагирующий маршрутизатор.

Вот и все. Это работает

3

Источник

user3462686 04 янв '22 в 06:49

user8826903 16 окт '22 в 06:18 2022-10-16 06:18 · Answer 9 · 2022-10-16 06:18

Поскольку большинство из нас уже предложили удалить свойство домашней страницы из package.json

Позвольте мне объяснить, почему это сработало в моем случае:

Ранее я настроил свой проект для размещения на страницах Github, и в результате для свойства домашней страницы было установлено что-то вроде «https://shubhamshd.github.io/supplyChainApp».

Однако, поскольку на Github-страницах есть известные навигационные ошибки, в основном связанные с пакетом BrowserRouter, мне пришлось переключиться на другие платформы хостинга.

И поскольку я забыл удалить свойство домашней страницы, развертывание не работало ни на одной из платформ, таких как Vercel или Netlify.

После долгих часов поиска и проб я, наконец, наткнулся на эту ветку, в частности на @ user7765900 , и, наконец, мне удалось решить ее, удалив нежелательное свойство домашней страницы.

user7244787 23 июл '20 в 14:59 2020-07-23 14:59 · Answer 10 · 2020-07-23 14:59

Я столкнулся с той же проблемой, когда хочу развернуть свое приложение для реагирования на github-pages: - необходимо следовать нескольким рекомендациям

Имя репозитория должно быть маленьким последним
Если имя проекта совпадает с именем репо, это полезно
addd { "predploy": "npm run build", "deploy": "gh-pages -d build" } в package.json
добавить скрипт домашней страницы в начало package.json
{"домашняя страница": "http://[Имя пользователя].github.io/[reponame]", "name": "-", "version": "-", "private": boolean, }

user7103882 23 фев '23 в 03:32 2023-02-23 03:32 · Answer 11 · 2023-02-23 03:32

Эта ошибка возникает, когда вы пытаетесь развернуть приложение из корневого подкаталога сервера. Вы можете устранить ошибку, выполнив следующие действия.

По умолчанию Create React App создает сборку, предполагая, что ваше приложение размещено в корневом каталоге сервера. Чтобы переопределить это, укажите домашнюю страницу в своемpackage.json. Это позволит Create React App правильно определить корневой путь для использования в сгенерированном HTML-файле.
```
        "homepage": "abc/",
```
Измените имя базового маршрута, если вы обслуживаете приложение из подкаталога.
```
        <BrowserRouter basename={"/abc"}>
    <Routes/>
</BrowserRouter>
```
Если вы используете сервер Nginx, вам нужно указать местоположение следующим образом:
```
          location /abc {
          alias /build-folder-path;
          try_files $uri /$uri /abc/index.html;
  }
```

NB: abc — это имя подкаталога/имя подмаршрута.

user9272741 31 янв '20 в 22:00 2020-01-31 22:00 · Answer 12 · 2020-01-31 22:00

Если вы развертываете свой клиент на S3, при развертывании с помощью response-deploy-s3 назначьте идентификатор распространения из CloudFront

react-deploy-s3 deploy \
  --access-key-id XXXXXXXXXXXXXXXXX \
  --secret-access-key XXXXXXXXXXXXXXXXXXXXXXXX \
  --bucket XXXXXXX \
  --regionus-east-1 \
  --distribution-id XXXXXXXXXXXXX                        <---

0

Источник

user9272741 31 янв '20 в 22:00