Failed to load module script: Expected a JavaScript module script but server responded with MIME type ‘text/html’ in Vite + React Firebase project

I am encountering an issue with my Vite + React project when deploying to Firebase. The console error I receive is:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Project Structure:

/project-root
  /public
    index.html
    vite.svg
  /src
    /components
    main.jsx
    App.jsx
  /dist (generated after build)
    index.html
    assets/
  /utils
  /build (after this hosting)
    index.html
  firebase.js
  firebase.json
  index.html
  vite.config.js

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

index.html (build)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="./images/png" href="/logo.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SAYTTC 2024</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../src/main.jsx"></script>
  </body>
</html>

firebase.json

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

Steps Taken:

Ran npm run build to generate the production files in the dist directory.
Deployed to Firebase using firebase deploy.

Issue:

After deploying, accessing the site results in the console error mentioned above and it displays nothing. It seems the server is serving an HTML file instead of the expected JavaScript module.