CODEWITHSUNDEEP
reactjsfirebasefirebase-hosting
hari babu
hari babu

Reputation: 13

firebase deploy gives black page with error Uncaught SyntaxError: Unexpected token '<'

My site neramclasses.com was working fine few days back.

Today, I tried to change some content and did npm run build and deploy to firebase hosting.

My build folder is created good with all the images and contents. When I run the build index.html with serve, it is also working fine.

When I deploy it to the firebase with firebase deploy from today the page is not working. No image links , page links etc.. nothing is working but I see all the files are uploaded to firebase in firebase console.

.firebase/hosting.YnVpbGQ.cache is created on deploy which also shows all the files

My firebase.json is

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

My scripts in package.json


  "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"
  },

My 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. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <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>

Am adding some screenshots of whats happening before and after deploy:

In the after image Javascript is interepted as html only content in the index meta data is shown

2nd Image

No file is pushed in root from App.js, also errors

I'm a beginner in web development. I tried every answer from stack overflow and chatgpt but no luck for me. Anyone willing to answer kindly explain in basic level. As for as my understanding, after deploying, the chunk.js files are considered as html file instead of js.

I tried

  1. delete node modules , package json and npm install
  2. I tried reinstalling firebase
  3. I npm build many times and firebase deploy many times.
  4. If the local build works fine with npx serve -s build but the deployment serves JavaScript files as HTML, the issue is likely related to Firebase hosting configuration or deployment process.

Upvotes: 1

Views: 81

Answers (1)

shaku
shaku

Reputation: 21

I was having the same problem. Today I updated my firebase-tools version from 13.11.4 to 13.12.0 (latest) and the problem was solved.

Upvotes: 2

Related Questions