Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”....
Khervie00
Posted on October 8, 2024
You might come across this error when trying to preview or load up your after building and deploying, say on netlify.
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
It can be pretty annoying because your tests and build passes and even deploys but when you launch the web app, you're met with a blank empty white page.
What can you do?
After combing the internet in search of a solution with no success, i found one with the exact same issue here.
Open your vite.config.js file in your project folder and edit it to look like this:
export default defineConfig({
server: {
port: 3000,
hmr: {
host: "localhost",
},
},
plugins: [], // Add your plugins here
base: "/", // Take note of this!!
// Add the rest of your build and vite config.
});
I mean add this line to your vite.config.js, if you haven't already:
base: "/"
Or you can follow here.
What happened? (Cause of the whole wahala).
So a brief breakdown, if you encounter this and open your browser console and go to the sources area, open the folder that contains your webapp, you'll see your index.html as well as your assets folder that "should" contain your index-${hash}.css and index-${hash}.js that shows your compiled and minified Css and Javascript code, just as you saw after building in the dist folder (I know you know all this blah blah blah).
If you should open your index-${hash}.css or index-${hash}.js, it should show you your css and JS code yeah? But only it doesn't. Here's the funny part, it returns the contents of your html instead.
Here's why; The browser tries to fetch your js and css assets using the "path" in the /index.html then the rewrite would return the contents of the /index.html and the the browser trying to access a Javascript MIME typefrom your js file but fails because your js file served an html type, hence the error
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.
This is usually common in projects deployed under a nested public path, when built, it follows the path accordingly and on deployment, might fail to read imported assets references like your css and JS, so specifying the base path would rewrite all assets accordingly, i.e JS-imported asset refs, CSS url refs, and asset references in your .html files are all automatically adjusted to respect this option during build.
All the long talk to just to really tell you to specify your base property in your vite config (change to "/") like we did earlier.
Saves time and stress!
You're welcome 😉.
Follow me on X.
Relevant links
Posted on October 8, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.