firebase + create-react-app 托管错误

Question

我试图在 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"
      } 
    ]
  }
}

Answer 1

您的 main.js 再次包含页面 html 数据。 <!doctype html><html lang="en"><head>...。

当浏览器加载 JS 文件并尝试解释它时，它失败了，因为 HTML 显然不是 javascript。它试图通过“哦，我发现了一个<但这不是我所期望的”来传达它的困惑。

您似乎已经为您的服务器配置了默认路由，每个请求 return 都是您的 index.html。

我在您的一张屏幕截图中注意到，您说 "yes" 是“将所有 URL 重写为 index.html” - 它就是这样做的。您不应该激活它，因为您的所有请求将始终 return 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": []
  }
}

Answer 2

感谢大家的快速回复。通过将 "redirects":[] 添加到 firebase.json 解决了问题，如下所示：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [],        
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Answer 3

100% 工作示例。

解决了在 Firebase 中托管 React 应用程序时的空白页面错误。

你可以阅读这个blog

在几分钟内托管您的 React Web 应用程序。

命令运行顺序错误=>

firebase login

firebase init

firebase deploy

npm run build

命令按正确顺序运行=>

firebase login

firebase init

npm run build

firebase deploy

Answer 4

我的解决方案是简单地更改 firebase.json 以使用构建文件夹而不是 public： enter image description here

Answer 5

这也可能是 package.json 文件中的一个问题，如果您设置了属性 homepage

   {
    "name": "project-name",
    "homepage": "https://project-url",
    "version": "0.1.0",
   }

要解决此问题，请删除 homepage 属性。

firebase + create-react-app 托管错误

firebase + create-react-app hosting error

syntax-error

firebase

reactjs

firebase-hosting