1

Обращаюсь так как не смог найти решение на форумах. Выдаёт данные ошибки в консоль:

[Error] Failed to load resource: the server responded with a status of 404 () (index-3d8e5605.css, line 0)

[Error] Failed to load resource: the server responded with a status of 404 () (index-000e3805.js, line 0)

Локально сборка запускается нормально, ts не выдаёт типовых ошибок. В assets на gh-pages branch оба эти файла есть в папке, а так же в dist/ html прописаны линки на эти файлы. Для deploy я использовал файл deploy.sh из документации vite и добавил base в vite.config.ts: "/ArtfulSpaces/" то есть название репозитория. Роуминг тоже пробовал разный Routes/BrowserRouter/HashRouter.

Ссылка на репозиторий: https://github.com/VRomanenko04/ArtfulSpaces

В чём может быть проблема? Сделал всё, что рекомендовали в ответах, белый экран так же остался, теперь ошибки через раз, то 404, то такие: введите сюда описание изображения

2 ответа 2

2
+50

Дело в ссылке после билда. Нужно base ссылку в vite.config'e заменить и настройках роутера, вот я как решил эту проблему:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/',
  plugins: [react()],
})

В вашем случае тут нужно использовать:

base: process.env.NODE_ENV === 'production' ? '/ArtfulSpaces/' : '/',

Ну и в роутере также нужно задать base ссылку

UPD:

Запустив ваш проект у себя локально я получил сообщение что у вас используется вложенный роутер, и я нашел проблему, она в файле App.tsx

Нужно убрать BrowserRouter отсюда и применить правило basename в файле main.tsx

App.tsx

<BrowserRouter basename={process.env.NODE_ENV==='production' ? '/ArtfulSpaces' : '/'}>
  <Routes>
    <Route path='/' element={<Layout/>}>
    <Route index element={<Home/>}/>
    ...
    <Route path='howorder' element={<OrderRules/>}/>
    </Route>
  </Routes>
</BrowserRouter>

На просто Routes:

<Routes>
  <Route path='/' element={<Layout/>}>
  <Route index element={<Home/>}/>
  ...
  <Route path='howorder' element={<OrderRules/>}/>
  </Route>
</Routes>

main.tsx

<BrowserRouter basename={process.env.NODE_ENV === 'production' ? '/ArtfulSpaces' : '/'}>
    <App />
</BrowserRouter>
8
  • Сделал все ваши рекомендации, но проблема белого экрана не ушла( я добавил в вопрос как выглядят ошибки. 12 сен в 13:40
  • Заметьте теперь проблема другая. Скрипты и стили браузер корректно загружает, теперь проблема где-то в другом месте
    – E1mir
    12 сен в 13:42
  • Получается проблема не в настройке деплоя, а где-то внутри проекта? 12 сен в 13:46
  • 1
    Да, деплой исправился, но проект локально не будет нормально запускаться. Так как я увидел что вы захардкодили название репозитория что нежелательно делать, ибо не будет корректно работать локально. Вам нужно поставить проверку что это продакшн или локальная сборка, и затем исправить проблемы локально, так как проект не запускается локально.
    – E1mir
    12 сен в 13:52
  • 1
    Спасибо большое за помощь, и за то, что помогли вне первого вопроса с ошибкой 404) Теперь всё работает 12 сен в 14:25
2

Проблема заключается в том, что Github Pages пытается получить js и css файлы по пути https://vromanenko04.github.io/assets/index-675017e0.js, а сама страница у вас находится на https://vromanenko04.github.io/ArtfulSpaces/ и доступ к js файлу можно получить по вот этой ссылке: https://vromanenko04.github.io/ArtfulSpaces/assets/index-675017e0.js.

Буквально первый сайт по запросу вашей ошибки, предлагает следующее решение (исправлено сразу под ваш случай):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/ArtfulSpaces/'
})

А так же передать basename в BrowserRouter

<BrowserRouter basename="/ArtfulSpaces">

P.s. не увидел, что уже ответ дали, пока я расписывал :( Ну ладно.

4
  • Сделал все ваши рекомендации, но проблема белого экрана не ушла( я добавил в вопрос как выглядят ошибки. 12 сен в 13:40
  • @ВладимирРоманенко перед деплоем вы еще раз пробовали запустить у себя на локалке проект? Просто ошибка вылетает в самом js файле, почему ошибка происходит не понятно т.к. код обфусцирован, по этому попробуйте у себя на локалке сначала протестировать все ли в порядке. 12 сен в 13:53
  • Проверил, была проблема по роутингу из-за browserrouter, теперь локально всё работает хорошо, но в продакте всё стало ещё хуже, белый экран остался, а ошибок в логах нету vromanenko04.github.io/ArtfulSpaces 12 сен в 14:09
  • @ВладимирРоманенко я думаю вам 100% уже помог E1mir. Я хоть так же получал ошибку с BrowserRouter, но почему-то значение ей не предал. Когда я тестил у вас еще был HashRouter и он в какой-то версии React, насколько я помню был разрешен. А в новых уже нет. Может по этому, забил на неё. 12 сен в 14:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.