Main.js содержит html при развертывании, что приводит к пустой странице
У меня есть реагирующее приложение, которое я раньше (около 4 месяцев назад) мог прекрасно развернуть на хостинге Firebase. Теперь, когда я запускаю firebase deploy, страница отображается пустой. Когда я захожу в devtools, он показывает, что main.[hashcode].js содержит тот же html, что и мой index.html, что, вероятно, означает, что у меня какая-то проблема с путями, но в моем коде я не могу найти нигде, что бы показывало этот. Папка сборки в моем проекте имеет правильный файл main.[hashcode].js с соответствующим JavaScript. Мой проект также находится в корневом каталоге.
Использование Firebase Serve работает нормально, равно как и локальный запуск приложения.
Может ли кто-нибудь помочь мне определить, что именно происходит не так?
Я использую узел v20.15.0, инструменты Firebase v13.11.4, Firebase v10.12.2 и npm v8.3.1.
Я попробовал это с помощью vite и создал приложение реагирования с теми же результатами. Я попытался изменить свойство домашней страницы в моем package.json, но ничего не получилось.
Действия по воспроизведению
Создайте приложение Create React по умолчанию.
Беги firebase init.
Добавьте хостинг и установите общедоступный каталог для сборки, затем «да» для настройки как одностраничного приложения и «нет» для автоматической сборки.
Запустите npm run build, а затем firebase deploy, и страница станет пустой.
Я также попытался сказать «Нет» переписыванию index.html, но это не решило проблему, и мой main.[hashcode].js выдает ошибку 404 в devtools.
Вот репозиторий GitHub с простым приложением реагирования, которое отображается пустым: https://github.com/nicholasmanha/simpleReact
и соответствующее развертывание Firebase: https://test2-5dd4c.web.app/
Вот мой firebase.json:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
index.html в папке сборки:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<link rel = "icon" href = "/favicon.ico" />
<meta name = "viewport" content = "width=device-width,initial-scale=1" />
<meta name = "theme-color" content = "#000000" />
<meta
name = "description"
content = "Web site created using create-react-app"
/>
<link rel = "apple-touch-icon" href = "/logo192.png" />
<link rel = "manifest" href = "/manifest.json" />
<title>React App</title>
<script defer = "defer" src = "/static/js/main.3dd63bcb.js"></script>
<link href = "/static/css/main.f855e6bc.css" rel = "stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id = "root"></div>
</body>
</html>
каталог моего проекта:
Ответы 1
переход на Firebase v10.7.2 и Firebase-tools 12.9.1 сработал для меня (хотелось бы, чтобы кто-нибудь объяснил, почему)