I'm trying to deploy a Vite + React project to Firebase. It deploys successfully, but the link renders nothing and returns this error in the console:
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.
Most of the solutions I've found indicate that the real issue is that it is not finding the index.html file due to a pathing issue. Others resolved this by removing the '.' from the path in the "source" and "destination" values in firebase.json or from config.base in vite.config, but this didn't solve it for me. I'm really unsure what the problem is.
Here's my index.html inside dist/assets:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/dynamic-dictionary/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Dictionary</title>
<script type="module" crossorigin src="/dynamic-dictionary/assets/index-a6323fd3.js"></script>
<link rel="stylesheet" href="/dynamic-dictionary/assets/index-b1761384.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Here's my firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}],
"frameworksBackend": {
"region": "us-central1"
}
}
}
And here's my vite.config.js:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
const config = {
plugins: [svgr(), react()],
base: '/',
}
if (command !== 'serve') {
config.base = '/dynamic-dictionary/'
}
return config
})
Any ideas as to what the real issue might be?