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 thedist
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.