Реакция Firebase. js приложение развернуто - пустая страница - PullRequest
Новая
       0

Реакция Firebase. js приложение развернуто - пустая страница

2 голосов
/ 07 апреля 2020

Я впервые использую Firebase и развернул реагирующее приложение, которое, как я знаю, работает и размещено на страницах github. Я следовал инструкциям документации Firebase и развернул приложение на их сайте. При загрузке сайта меня встречает пустая страница.

ссылка: https://monsterpwa.web.app/

firebase. json file: 

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Все предыдущие посты здесь посвящены publi c разделы изменяются для построения. Кроме того, что я не мог найти никого другого с подобным вопросом.

Журнал консоли и ошибка, указывающая на неожиданный токен '<' в строке 1 столбца 1, но я также не вижу этого. </p>

Файл манифеста: 

{
  "short_name": "Monster App",
  "name": "Monster App D&D Spells and Items",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "/public/media/800x800.png",
      "type": "image/png",
      "sizes": "800x800"
  }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#2d4059;",
  "theme_color": "#2d4059",
  "orientation": "portrait-primary"
}

сборка 

Build 

--> Media  -- > *empty*

--> static  -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.

asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js

С уважением,

Снег

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

Проблема в том, что вы настроили ваше приложение для поиска ресурсов в каталоге /MonsterPWA, но его, похоже, не существует.

Например, ваш файл index.html имеет 

<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>

но файл на самом деле доступен по адресу /static/js/main.3267ab84.js.

Ваше правило переписывания перехватывает все несуществующие запросы файлов и возвращает index.html, отсюда и предупреждения о <.

Проверьте конфигурацию homepage в package.json и / или в переменной среды PUBLIC_URL.

1 голос
/ 07 апреля 2020

Если вы проверите консоль JavaScript вашего браузера, это показывает, что при загрузке CSS возникла проблема.

Ресурс интерпретируется как таблица стилей, но передается с текстом MIME-типа / html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".

Uncaught SyntaxError: Неожиданный токен '<' </p>

Из вкладки «Сеть» видно, что она загружает этот URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css, но возвращает HTML (из-за правила перезаписи).

Убедитесь, что ваш CSS сгенерирован в build/MonsterPWA/static/css/main.7bf83f0f.css, поскольку именно там Firebase Hosting его ищет.

Редактировать : быстрая проверка показывает, что CSS на самом деле существует в https://monsterpwa.web.app/static/css/main.7bf83f0f.css, поэтому в build/static/css/main.7bf83f0f.css.

...