Search code examples
reactjsfirebase-hosting

main.js contains html when in deployment resulting in blank page

I have a react app that I was previously (about 4 months ago) able to deploy to firebase hosting just fine. Now when I run firebase deploy, The page shows up blank. When I go to devtools it shows that the main.[hashcode].js contains the same html as my index.html which likely means I have some kind of pathing issue, but there is nowhere in my code that I can find that would show this. The build folder in my project has the proper main.[hashcode].js with the proper javascript. My project is also in the root directory.

Using firebase serve works just fine, as well as running the app locally.

Can anybody help me pin point what exactly is going wrong?

I am using node v20.15.0, firebase tools v13.11.4, firebase v10.12.2 and npm v8.3.1

I have tried this with vite and create react app with the same results. I have tried changing the homepage property in my package.json, still nothing.

Steps to reproduce Create a default create react app. Run firebase init. Add hosting, and set the public directory to build, then yes to configuring as a single page app, and no to automatic builds. Run npm run build and then firebase deploy, and the page is blank.

I have also tried saying "No" to rewriting to index.html which did not fix the issue, and my main.[hashcode].js is 404ing in devtools.

Here is a github repo with a simple react app that is showing up blank: https://github.com/nicholasmanha/simpleReact

and the corresponding firebase deployment: https://test2-5dd4c.web.app/

Here is my firebase.json:

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

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.html in build folder:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
    <link href="/static/css/main.f855e6bc.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

my project directory:

enter image description here

Solution

  • downgrading to firebase v10.7.2 and firebase-tools 12.9.1 worked for me (would love for someone to explain why)