firebase + create-react-app 托管错误
[英]firebase + create-react-app hosting error
问题描述
i was trying to deploy my react SPA on Firebase, but got only blank page with such console error: "Uncaught SyntaxError: Unexpected token <"
我试图在 Firebase 上部署我的 react SPA，但只有空白页面出现这样的控制台错误： “Uncaught SyntaxError: Unexpected token <”
chrome console chrome_elements_blank铬控制台chrome_elements_blank
to exclude third part libraries I created new React-app to deploy.为了排除第三方库，我创建了新的 React-app 来部署。 and got exactly same problem.并得到了完全相同的问题。
terminal log:终端日志：
anybody knows how to fix this?有人知道如何解决这个问题吗？
link to firebase deployed create-react-app start page链接到 Firebase 部署的 create-react-app 起始页
Code from firebase.json来自 firebase.json 的代码
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
}
}
5 个解决方案
解决方案1
6 已采纳 2018-08-15 14:10:19
Your main.js contains the page html data again.您的 main.js 再次包含页面 html 数据。 <!doctype html><html lang="en"><head>... . <!doctype html><html lang="en"><head>... 。
As the browser loads the JS file and tries to interpret it, it fails, as HTML is clearly not javascript.当浏览器加载 JS 文件并尝试解释它时，它失败了，因为 HTML 显然不是 javascript。 It tries to communicate its confusion with " Oh I found a < but that is not what I expected ".它试图用“哦，我找到了一个 < 但这不是我所期望的”来传达它的困惑。
You seem to have configured a default route for your server and each and any request returns your index.html.您似乎已经为您的服务器配置了默认路由，并且每个请求都返回您的 index.html。
I noticed in one of your screenshots, that you said "yes" to " Rewrite all urls to index.html " - it does exactly that.我在你的一张屏幕截图中注意到，你对“将所有 url 重写为 index.html ”说“是”——它正是这样做的。 You should not activate that, as ALL you requests will then always return the index.html .您不应该激活它，因为您的所有请求将始终返回index.html 。
Please have a look in your firebase.json file.请查看您的firebase.json文件。 You will find the instructions for hosting and routing in there.您将在那里找到托管和路由的说明。
API Docs are here: API 文档在这里：
https://firebase.google.com/docs/hosting/full-config https://firebase.google.com/docs/hosting/full-config
You might want to have a special look into the redirects array, looking like this:您可能想要特别查看重定向数组，如下所示：
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
Here you tell the server to redirect all traffic to /index.html .在这里，您告诉服务器将所有流量重定向到/index.html 。 Delete the redirect entries, redeploy and all will be well.删除重定向条目，重新部署，一切都会好起来的。
So this redirects section will most probably solve the issue:所以这个重定向部分很可能会解决这个问题：
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": []
}
}
解决方案2
2 2018-08-20 07:53:45
thanks everyone for quick reply.谢谢大家的快速回复。 problem was solved with adding "redirects":[] to firebase.json like this:通过将"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% Working Example. 100% 工作示例。
Solved Blank Page Error in React App Hosting in Firebase .解决了 Firebase 中 React App Hosting 中的空白页面错误。
You can read this blog你可以阅读这个博客
Host Your React Web App in few minutes.在几分钟内托管您的 React Web 应用程序。
Command runnning in Wrong sequence =>命令以错误的顺序运行 =>
firebase login
firebase init
firebase deploy
npm run build
Command runnning in Correct sequence =>命令以正确的顺序运行 =>
firebase login
firebase init
npm run build
firebase deploy
解决方案4
0 2020-09-04 18:24:18
我的解决方案是简单地将 firebase.json 更改为使用 build 文件夹而不是 public：在此处输入图像描述
解决方案5
0 2021-07-12 16:10:50
This also can be an issue in the package.json file, if you have set the attribute homepage如果您设置了属性homepage ，这也可能是package.json文件中的一个问题
{
"name": "project-name",
"homepage": "https://project-url",
"version": "0.1.0",
}
to solve this issue remove the homepage attribute.要解决此问题，请删除homepage属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.