Пустая страница после запуска сборки в приложении create-реагировать

Я решил проблему, установив

"homepage": "."

в package.json согласно этот документ

Добавлять

"homepage": ".",

в вашем package.json, затем снова постройте.

Итак, проблема заключается в кэшировании вашего приложения в браузере.

Я решил эту проблему с serviceWorker() в create-react-app.

Вот решение: просто добавьте это в свой файл index.js и удалите реестр сервисного работника.

import { unregister } from './registerServiceWorker';
unregister();

1. Беги npm run eject

2. Отредактируйте файл webpack.config в папке config

3. Найдите путь с "static/" или "static/js/" или "static/css/" в файле и удалите такой путь

4. Создайте свой проект снова

Эта работа для меня. надеюсь, это сработает и для вас.

Как сказал @Вертон, добавив "homepage": ".", в файл package.json, в высший уровень вот так:

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}

Если вы используете react-router и пытаетесь открыть index.html прямо в браузере (или используете электрон, который, по сути, и делает это), в дополнение к настройке homepage, как предлагали другие, замените BrowserRouter на HashRouter.

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

Я обнаружил, что это точно так же, как открытие файла index.html непосредственно в браузере. Все говорят "установить homepage в package.json", но у меня это уже было. И что теперь!?

В конце концов я понял, что проблема была react-router. Я использовал BrowserRouter. Переход на HashRouter решил проблему для меня.

Я пытался открыть приложение после сборки, дважды щелкнув index.html, и это тоже не сработало, я получил пустую страницу, но если встроенные файлы запускаются в серверной среде, работает. https://create-react-app.dev/docs/deployment/

Оооо, как я только что узнал, что я делал снова и снова: вы опубликовали папку публичный вместо папки строить.

У меня был комментарий внутри моего метода return, и это вызвало у меня проблему.

Если сообщение об ошибке в консоли браузера

Minified React error #152;

Тогда удаление любого комментария внутри метода return может решить вашу проблему, как и мою.

Для меня проблема заключалась в том, что встроенный сценарий выполнения не запускался, так как я получал сообщение об ошибке:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-5='), or a nonce ('nonce-...') is required to enable inline execution.

Это было исправлено путем добавления переменной INLINE_RUNTIME_CHUNK=false в скрипт сборки.

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

Это связано с Политика безопасности контента браузеров: «Браузер, совместимый с CSP, будет выполнять только сценарии, загруженные в исходные файлы, полученные из этих разрешенных доменов, игнорируя все остальные сценарии (включая встроенные сценарии и HTML-атрибуты обработки событий)».

Я столкнулся с подобной проблемой. Но если вы будете правильно следовать React-развертывание, вы поймете, что есть "домашняя страница":"." // Пользователь "." если вы развертываете на своем локальном компьютере, но на сервере, размещенном где-то, вы можете использовать свой домен или IP-адрес в поле домашней страницы.

{
  "homepage":"https://example.com"
}