OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter heshan navindu
  • Start date Start date
H

heshan navindu

Guest
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:

Code:
/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

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

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

index.html (build)

Code:
<!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

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

Steps Taken:​

  1. Ran npm run build to generate the production files in the dist directory.
  2. 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.

<p>I am encountering an issue with my Vite + React project when deploying to Firebase. The console error I receive is:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p><strong>Project Structure:</strong></p>
<pre><code>/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
</code></pre>
<p><strong>vite.config.js</strong></p>
<pre class="lang-js prettyprint-override"><code>import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
</code></pre>
<p><strong>index.html</strong> (build)</p>
<pre class="lang-html prettyprint-override"><code><!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>
</code></pre>
<p><strong>firebase.json</strong></p>
<pre class="lang-json prettyprint-override"><code>{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
</code></pre>
<h3>Steps Taken:</h3>
<ol>
<li>Ran <code>npm run build</code> to generate the production files in the <code>dist</code> directory.</li>
<li>Deployed to Firebase using <code>firebase deploy</code>.</li>
</ol>
<h3>Issue:</h3>
<p>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.</p>
 

Latest posts

M
Replies
0
Views
1
MusicLovingIndianGirl
M
Q
Replies
0
Views
2
quora question
Q
Top