Firebase部署后页面黑屏，遇Uncaught SyntaxError错误求助

问题详情 #

网站neramclasses.com此前运行正常，修改内容后执行npm run build并部署至Firebase Hosting：

• build文件夹生成正常，包含所有图片及内容
• 本地通过npx serve -s build运行build目录下的index.html完全正常
• 部署后页面黑屏，图片、链接均无法加载
• Firebase控制台显示所有文件已上传，部署时生成了.firebase/hosting.YnVpbGQ.cache文件
• 浏览器控制台报错：Uncaught SyntaxError: Unexpected token '<'，观察到chunk.js文件被识别为HTML而非JS

已尝试操作 #

• 删除node_modules、package-lock.json后执行npm install
• 重新安装Firebase
• 多次执行npm run build和firebase deploy

配置文件 #

firebase.json配置 #

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

package.json中的scripts配置 #

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "sitemap": "babel-node ./sitemap-generator.js",
  "predeploy": "npm run sitemap"
},

index.html配置 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/images/favicon/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="Unlock your architectural dreams with our comprehensive NATA coaching center, serving aspiring architects in Trichy, Chennai, Madurai, Coimbatore, Tiruppur, Pudukkottai, and across Tamil Nadu. Our expert tutors blend online and offline learning, ensuring top-notch preparation for NATA exams. Join us for personalized guidance, extensive study materials, and interactive sessions. Discover your path to success, whether you're in Tamil Nadu or the UAE. Enroll today and sculpt your future in architecture!"
      content="A well Architected NATA Coaching center"
    />
    <meta
      property="og:image"
      content="https://neramclasses.com/images/instagram.jpg"
    />
    <link
      rel="apple-touch-icon"
      href="%PUBLIC_URL%/images/favicon/apple-icon-60x60"
    />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
    <link
      href="https://fonts.googleapis.com/css2?family=Handlee&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Bakbak+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Suez+One&display=swap"
      rel="stylesheet"
    />

    <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>neramClasses - Online / Offline NATA coaching classroom</title>
  </head>
  <body>
    <noscript
      >neram classes is a online/offline NATA coaching center located in chennai
      - Tambaram & Anna Nagar, Trichy, Madurai, Coimbatore, Tiruppur,
      Pudukkottai.Neram Classes is an entrance exam coaching center, primarily
      focusing on architecture exams such as NATA and JEE-MAINs. We are
      committed to giving back to society by providing coaching to students from
      smaller towns and rural areas. Established in 2017 by alumni from
      .....etc.</noscript
    >
    <div id="root"></div>
  </body>
</html>

核心原因 #

报错的本质是：Firebase的rewrites规则把所有请求（包括JS、CSS、图片等静态资源）都重定向到了index.html。浏览器请求chunk.js时，服务器返回的是index.html的内容，导致JS解析时遇到HTML的<符号触发语法错误。

分步解决方案 #

1. 修正Firebase的rewrites规则 #

修改firebase.json，让静态资源请求直接返回对应文件，只有路由请求才重定向到index.html：

"rewrites": [
  {
    "source": "**/*.@(js|css|png|jpg|jpeg|gif|ico|svg|json)",
    "destination": "/$1"
  },
  {
    "source": "**",
    "destination": "/index.html"
  }
]

这个规则的逻辑是：所有后缀为js/css/png等的静态资源，直接返回对应文件；其他请求（比如页面路由）才跳转到index.html。

2. 检查并设置PUBLIC_URL #

在package.json中添加homepage字段，确保React build时生成正确的资源路径：

"homepage": "https://neramclasses.com"

如果是部署在根域名，也可以设置为"."，确保index.html里的资源链接是正确的绝对路径。

3. 清理缓存并重新部署 #

• 删除本地的.firebase文件夹
• 重新执行npm run build，确保build文件夹内容最新
• 执行firebase deploy --only hosting，仅部署托管部分

4. 验证sitemap脚本 #

检查sitemap-generator.js是否修改了build文件夹内的index.html或静态资源，避免脚本破坏资源路径。

验证方式 #

部署完成后，打开浏览器开发者工具：

• 查看Network标签，确认chunk.js等资源的状态码为200，响应内容是JS代码而非HTML
• 查看Console标签，确认不再出现Unexpected token '<'报错

内容的提问来源于stack exchange，提问作者hari babu