firebase + create-react-app 托管错误
Posted
技术标签:
【中文标题】firebase + create-react-app 托管错误【英文标题】：firebase + create-react-app hosting error 【发布时间】：2019-01-22 06:15:39 【问题描述】：我试图在 Firebase 上部署我的 React SPA，但只得到带有此类控制台错误的空白页面： "Uncaught SyntaxError: Unexpected token
chrome console chrome_elements_blank
为了排除第三方库，我创建了新的 React-app 来部署。并遇到了完全相同的问题。
终端日志：
part1 part2
part3 part4
有人知道如何解决这个问题吗？
link to firebase deployed create-react-app start page
firebase.json 中的代码
"hosting":
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
"source" : "*",
"destination" : "/index.html"
]
【问题讨论】：
每次我尝试复制/粘贴代码时，它都会在此处内联转换（（ 请将您的错误、代码和数据库结构作为文本而不是图像。 添加了完整的解决方案。如果这对您有帮助，请随时对答案进行投票并将其标记为这样。谢谢。 【参考方案1】：您的 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": []
【讨论】：
感谢您的回复。这里没有具体的代码。只是标准的 create-react-app 起始页。关于 HTML 和 JS，我认为这是 babel 所做的。翻译 jsx 让浏览器理解。所以你建议改变firebase初始道具？ 例如有一个 firebase.json。我敢打赌，服务器的说明就在那里。将其添加到答案中。 在检查了 firebase.json 图像的内容后，我的答案很明显 我试过了——我的重定向是空的，但我的 rewrites 数组中有相同的条目。我没有东西可以尝试，所以我尝试删除这些并重新部署 - 但我仍然得到空白页。 @Mel 你解决了这个问题吗？我正在尝试每个 *** 解决方案，但仍然无法正常工作。有什么建议吗？【参考方案2】：感谢大家的快速回复。通过将 "redirects":[] 添加到 firebase.json 解决了问题，如下所示：
"hosting":
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [],
"rewrites": [
"source": "**",
"destination": "/index.html"
]
【讨论】：
我尝试将重定向：[] 添加到我的 firebase.json 文件中，但仍然得到空白页。 由于您的代码可能不同，我建议您创建一个新问题。 这是一个危险的反应，因为我假设很多用户可能已经为此目的创建了“重定向”..重定向 - 在不评估后果的情况下更改它可能不是那么明智 IMO :) 【参考方案3】：100% 工作示例。
解决了 Firebase 中 React 应用托管中的空白页错误。
你可以阅读这个blog
在几分钟内托管您的 React Web 应用程序。
命令运行顺序错误 =>
firebase 登录
firebase 初始化
firebase 部署
npm 运行构建
以正确顺序运行的命令 =>
firebase 登录
firebase 初始化
npm 运行构建
firebase 部署
【讨论】：
详细解释请点击以上链接【参考方案4】：我的解决方案是简单地将 firebase.json 更改为使用构建文件夹而不是公共文件夹： enter image description here
【讨论】：
如果您在答案中包含 json 而不是屏幕截图会很有帮助。 可能因人而异。您应该从我的屏幕截图中获取的唯一内容是“public”：“build”，因为我之前是“public”：“public”【参考方案5】：如果您设置了属性homepage，这也可能是package.json 文件中的问题
"name": "project-name",
"homepage": "https://project-url",
"version": "0.1.0",
要解决此问题，请删除 homepage 属性。
【讨论】：
以上是关于firebase + create-react-app 托管错误的主要内容，如果未能解决你的问题，请参考以下文章
错误的ERR！缺少脚本：在将react应用程序部署到heroku时构建
如何调试从 create-react-app 创建的应用程序使用的本地打字稿模块
我如何在Service Worker中缓存动态URL？它与预缓存有关系吗？我正在使用ReactJS默认serviceWorker
如何在 React.js 中使用 react-router-dom 保持 App() 级别状态不重置？