Question

我试图在Firebase上部署我的react SPA，但是只有空白页面出现这样的控制台错误： “未捕获的SyntaxError：意外令牌<”

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

100％工作示例。

解决了Firebase中的React App Hosting中的空白页错误。

您可以阅读此blog

在几分钟内托管您的React Web App。

命令运行顺序错误=>

firebase登录

firbase初始化

firebase部署

npm运行构建

以正确的顺序运行命令=>

firebase登录

firbase初始化

npm运行构建

firebase部署

Answer 2

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

当浏览器加载JS文件并尝试解释它时，它失败了，因为HTML显然不是JavaScript。它试图与“ 哦，我找到一个<，但这不是我期望的”进行沟通。

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

我在您的一张屏幕截图中注意到，您对“ 将所有网址重写为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": []
  }
}

Answer 3

感谢大家的快速答复。通过向Firebase.json中添加"redirects":[]来解决此问题：

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

Answer 4

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

Answer 5

如果您设置了属性 package.json

，这也可能是 homepage 文件中的问题

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

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

Firebase +创建反应应用托管错误

5 个答案: