firebase + create-react-app 托管错误答案

【问题标题】：firebase + create-react-app hosting errorfirebase + create-react-app 托管错误
【发布时间】：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"
      } 
    ]
  }
}

【问题讨论】：

每次我尝试复制/粘贴代码时，它都会在此处内联转换（（
请将您的错误、代码和数据库结构作为文本而不是图像。
添加了完整的解决方案。如果这对您有帮助，请随时对答案进行投票并将其标记为这样。谢谢。

标签： reactjs firebase syntax-error firebase-hosting

【解决方案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 你解决了这个问题吗？我正在尝试每个 StackOverflow 解决方案，但仍然无法正常工作。有什么建议吗？

【解决方案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 属性。

【讨论】：