Почему в сборке React Webpack отображается пустая страница?

Я создаю приложение реакции, и на данный момент webpack-dev-server работает просто отлично (появляется текст hello world), но webpack -p показывает пустую страницу. Для производственной сборки вкладка "Сеть" под инструментами Chrome Dev показывает index.html а также index_bundle.js иметь размер 0 B(см. рисунок) Но это явно не тот случай, когда размер файла HTML составляет 227 B & index_bundle.js размер файла 195Kb(см. рисунок)

Также на вкладке Chrome Devtools Elements показано следующее (см. Рисунок)

Мой файл конфигурации webpack выглядит так:

Источник

3 ответа

Я понял это, я использовал browserHistory без настройки локального сервера. Если я изменил его на hashHistory, это сработало. Для локального тестирования производства веб-пакетов с историей браузера реакции-маршрутизатора мне нужно было сделать это. Настроить сервер:

Ваш сервер должен быть готов обрабатывать реальные URL. Когда приложение в первый раз загружается в /, оно, вероятно, будет работать, но, когда пользователь перемещается и затем нажимает кнопку Обновить в /account /23, ваш веб-сервер получит запрос к /account /23. Он понадобится вам для обработки этого URL и включения вашего JavaScript-приложения в ответ.

Экспресс-приложение может выглядеть так:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

И на всякий случай, если кто-то развертывает на firebase, используя реагирующий маршрутизатор с историей браузера, сделайте это:

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
Источник

Использование

import { HashRouter } from 'react-router-dom';

вместо

import { BrowserRouter} from 'react-router-dom';

и не забудьте заменить его в вашем коде маршрутов

<HashRouter>
  ...
</HashRouter>
Источник

Изменение

import {BrowserRouter as Router} from 'react-router-dom'

кому:

import {HashRouter as Router} from 'react-router-dom'

в App.js помог мне исправить ту же проблему в моем проекте create-react-app.

Источник 
<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

Базовое имя: строка
Базовый URL для всех мест. Если ваше приложение обслуживается из подкаталога на вашем сервере, вы можете установить его в подкаталог. Правильно отформатированное базовое имя должно иметь начальную косую черту, но не должно заканчиваться косой чертой.

Источник

GitHub Pages не поддерживает маршрутизаторы, которые используют HTML5 pushState история API под капотом (например, использование React Router browserHistory). Это связано с тем, что при загрузке новой страницы для URL, например, http://user.github.io/todomvc/todos/42, где /todos/42 является внешним интерфейсом, сервер GitHub Pages возвращает 404, потому что он ничего не знает о /todos/42, Если вы хотите добавить маршрутизатор в проект, размещенный на страницах GitHub, вот несколько решений:

  • Вы можете перейти от использования API истории HTML5 к маршрутизации с хешами. Если вы используете React Router, вы можете переключиться на hashHistory для этого эффекта, но URL будет более длинным и более подробным (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Узнайте больше о различных реализациях истории в React Router.
  • Кроме того, вы можете использовать трюк, чтобы научить страницы GitHub обрабатывать 404 путем перенаправления на ваш index.html страница со специальным параметром перенаправления. Вам нужно будет добавить 404.html файл с кодом перенаправления на build папку перед развертыванием проекта, и вам нужно будет добавить код, обрабатывающий параметр перенаправления в index.html, Вы можете найти подробное объяснение этой техники в этом руководстве.
Источник

Ни один из них не работал для меня, моя ошибка заключалась в том, что я перепутал папки

Решение:

npm run build

моя конфигурация apache:

не сработало

DocumentRoot /var/www/sites/example.com/client/public/

работал (папка сборки не общедоступна)

DocumentRoot /var/www/sites/example.com/client/build/
Источник

У меня было уникальное решение - у меня не работала только одна страница. Поэтому я просто проверил журнал консоли и обнаружил ошибку. По какой-то причине ошибка отображалась только для "response-scripts-build", а не "react-scripts-start".

Это привело к пустой странице

Источник
Другие вопросы по тегам