firebase + create-react-app 托管错误
[英]firebase + create-react-app hosting error
问题描述
我试图在 Firebase 上部署我的 react SPA，但只有空白页面出现这样的控制台错误： “Uncaught SyntaxError: Unexpected token <”
为了排除第三方库，我创建了新的 React-app 来部署。 并得到了完全相同的问题。
终端日志：
有人知道如何解决这个问题吗？
链接到 Firebase 部署的 create-react-app 起始页
来自 firebase.json 的代码
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
}
}
5 个解决方案
解决方案1
6 已采纳 2018-08-15 14:10:19
您的 main.js 再次包含页面 html 数据。 <!doctype html><html lang="en"><head>... 。
当浏览器加载 JS 文件并尝试解释它时，它失败了，因为 HTML 显然不是 javascript。 它试图用“哦，我找到了一个 < 但这不是我所期望的”来传达它的困惑。
您似乎已经为您的服务器配置了默认路由，并且每个请求都返回您的 index.html。
我在你的一张屏幕截图中注意到，你对“将所有 url 重写为 index.html ”说“是”——它正是这样做的。 您不应该激活它，因为您的所有请求将始终返回index.html 。
请查看您的firebase.json文件。 您将在那里找到托管和路由的说明。
API 文档在这里：
https://firebase.google.com/docs/hosting/full-config
您可能想要特别查看重定向数组，如下所示：
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
在这里，您告诉服务器将所有流量重定向到/index.html 。 删除重定向条目，重新部署，一切都会好起来的。
所以这个重定向部分很可能会解决这个问题：
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": []
}
}
解决方案2
2 2018-08-20 07:53:45
谢谢大家的快速回复。 通过将"redirects":[]到 firebase.json 解决了问题，如下所示：
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
解决方案3
0 2019-05-24 11:10:01
100% 工作示例。
解决了 Firebase 中 React App Hosting 中的空白页面错误。
你可以阅读这个博客
在几分钟内托管您的 React Web 应用程序。
命令以错误的顺序运行 =>
登录
火力初始化
火力基地部署
npm 运行构建
命令以正确的顺序运行 =>
登录
火力初始化
npm 运行构建
火力基地部署
解决方案4
0 2020-09-04 18:24:18
我的解决方案是简单地将 firebase.json 更改为使用 build 文件夹而不是 public：在此处输入图像描述
解决方案5
0 2021-07-12 16:10:50
如果您设置了属性homepage ，这也可能是package.json文件中的一个问题
{
"name": "project-name",
"homepage": "https://project-url",
"version": "0.1.0",
}
要解决此问题，请删除homepage属性。
创建反应应用程序错误
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.