Почему отображается пустая страница на github pages?

@Mukzer · Регистрация: 08.09.2018

Author24 — интернет-сервис помощи студентам

Хочу выложить React проект на github pages, почему-то отображается пустая страница после deploy...
Приложение создал через npx create-react-app
Подскажите пожалуйста в чём может быть проблема, уже всё перепробовал

Ветка master - https://github.com/qmorozov/searchApp/tree/master
Ветка gh-pages - https://github.com/qmorozov/se... e/gh-pages
Страница сайта github pages - https://qmorozov.github.io/searchApp/

@mr_dramm · 26.07.2022, 22:34

Потому что index.html должен быть в корневой папке по крайней мерее по умолчанию, на ее судя по документации можно поменять но я не пробовал (пятый пункт)

@Mukzer · 27.07.2022, 10:18 **[ТС]**

index.html находится в корне build версии react приложения (ветка gh-pages), он и открывается, стили загружаются, но вот само приложение не отображается...

@Rius · 27.07.2022, 11:05

Там скрипты ищутся в /searchapp, а это не понятно где.

@Mukzer · 27.07.2022, 11:11 **[ТС]**

Делал по статьям из интернета по типу этой
https://dev.to/yuribenjamin/ho... pages-2a1f

Где "searchApp" это название репозитория...

@Rius · 27.07.2022, 11:21

Да, в браузере посмотрел, грузится.
Посмотрите сами в DevTools в Chrome (кнопка F12). Там ошибки валятся, по крайней мере у меня.

@Mukzer · 27.07.2022, 11:33 **[ТС]**

(favicon.png:1 GET https://qmorozov.github.io/searchApp/favicon.png 404)
(Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.)

У меня там только одна ошибка, и одно предупреждение, и то ошибка только из-за favicon...
Странно что если скопировать код js и вставить в поле поиска, всё загружается, и открывается, но приложение не работает -_-

@Rius · 27.07.2022, 11:36

Там какой-то индикатор ошибок в консоли и в нём по штук 10 в секунду прибавляется.

unchecked runtime.lastError: The message port closed before a response was received.

Но это может из-за моей сети.

@Mukzer · 27.07.2022, 12:00 **[ТС]**

Странно что в этом приложении всё нормально работает, при том что делал deploy одинаково...

https://qmorozov.github.io/WeatherApp/
https://github.com/qmorozov/We... e/gh-pages

Добавлено через 20 минут
В общем Проблему решил...
Связано было с react-router.

Нужно заменить "BrowserRouter" на "HashRouter".

Javascript

<HashRouter>
      <Routes>
            <Route path="/" element={<HomePage />}/>
            <Route path="search" element={<SearchPage />}/>
      </Routes>
</HashRouter>

Спасибо всемм за попытки помочь!

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
		1
	Почему отображается пустая страница на github pages? 26.07.2022, 22:17. Показов 6699. Ответов 8 Метки github (Все метки) Хочу выложить React проект на github pages, почему-то отображается пустая страница после deploy... Приложение создал через npx create-react-app Подскажите пожалуйста в чём может быть проблема, уже всё перепробовал Ветка master - https://github.com/qmorozov/searchApp/tree/master Ветка gh-pages - https://github.com/qmorozov/se... e/gh-pages Страница сайта github pages - https://qmorozov.github.io/searchApp/ 0

@mr_dramm молодой 1766 / 1008 / 319 Регистрация: 17.07.2021 Сообщений: 2,041 Записей в блоге: 12
	26.07.2022, 22:34	2
	Потому что index.html должен быть в корневой папке по крайней мерее по умолчанию, на ее судя по документации можно поменять но я не пробовал (пятый пункт) 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 10:18 [ТС]	3
	index.html находится в корне build версии react приложения (ветка gh-pages), он и открывается, стили загружаются, но вот само приложение не отображается... 0

@Rius 10999 / 6918 / 1562 Регистрация: 25.05.2015 Сообщений: 20,851 Записей в блоге: 14
	27.07.2022, 11:05	4
	Там скрипты ищутся в /searchapp, а это не понятно где. 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 11:11 [ТС]	5
	Делал по статьям из интернета по типу этой https://dev.to/yuribenjamin/ho... pages-2a1f Где "searchApp" это название репозитория... 0

@Rius 10999 / 6918 / 1562 Регистрация: 25.05.2015 Сообщений: 20,851 Записей в блоге: 14
	27.07.2022, 11:21	6
	Да, в браузере посмотрел, грузится. Посмотрите сами в DevTools в Chrome (кнопка F12). Там ошибки валятся, по крайней мере у меня. 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 11:33 [ТС]	7
	(favicon.png:1 GET https://qmorozov.github.io/searchApp/favicon.png 404) (Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.) У меня там только одна ошибка, и одно предупреждение, и то ошибка только из-за favicon... Странно что если скопировать код js и вставить в поле поиска, всё загружается, и открывается, но приложение не работает -_- 0

@Rius 10999 / 6918 / 1562 Регистрация: 25.05.2015 Сообщений: 20,851 Записей в блоге: 14
	27.07.2022, 11:36	8
	Там какой-то индикатор ошибок в консоли и в нём по штук 10 в секунду прибавляется. unchecked runtime.lastError: The message port closed before a response was received. Но это может из-за моей сети. 1

	27.07.2022, 12:00

Почему отображается пустая страница на github pages?

Решение