Неожиданный токен ‘<' для вложенных URL-адресов в AWS Amplify

#amazon-s3 #react-router #clojurescript #aws-amplify #re-frame

#amazon-s3 #реагировать-маршрутизатор #clojurescript #aws-amplify #перефразируйте

Вопрос:

У меня есть веб-приложение React, созданное с помощью AWS Amplify, размещенное в корзине S3.

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

Я добавил следующее правило перезаписи, и это решило проблему для маршрутов на расстоянии одного / от root. Например, теперь я могу обновить страницу или перейти непосредственно к https://example.com/users

введите описание изображения здесь

Однако проблема сохраняется, когда URL-маршрут вложен сверх этого.

Например, https://example.com/users/profile страница по-прежнему будет пустой, если я перейду непосредственно к ней, введя адрес в строке URL, или если я обновлю страницу, находясь на ней.

Когда я открываю консоль JS для проверки ошибок (браузер Chrome) Я вижу следующую ошибку:

 app.js:1 Uncaught SyntaxError: Unexpected token '<'
  

Кто-нибудь еще сталкивался с этой проблемой? Кажется, я не могу найти решение, которое работает. Я читал, что добавление homepage: "/" в package.json или изменение start_url в файле manifest.json с «.» на «/» должно решить эту проблему, но я пробовал оба, и это не сработало.

Любые советы или рекомендации будут очень признательны. Заранее спасибо всем!

Комментарии:

1. Я ничего не знаю об AWS Amplify, но Unexpected token '<' ошибка, вероятно, означает, что вместо использования app.js фактического JavaScript он получает некоторый HTML. Вы можете убедиться в этом, открыв app.js URL-адрес непосредственно в браузере.

2. @ThomasHeller как мне это решить?

Ответ №1:

Похоже, проблема заключалась в том, как я импортировал app.js в моем HTML-файле.

Я импортировал его следующим образом: <script src="js/app.js"/>

Я изменил его на: <script src="/js/app.js"/>

и это сделало свое дело. Теперь мои страницы обновляются нормально.

Ответ №2:

Возникла точно такая же проблема — вложенные маршруты ломались при обновлении или прямой навигации. Но мое приложение было приложением Create React.

Решил это, удалив строку в моем package.json , которая содержала "homepage": "." . В результате сценарии моего приложения изменились с src="./static/js/bundle.js" на src="/static/js/bundle.js" , и теперь все работает.