How I fixed the Failed to load module script error
While working on a project in Vanilla JS, I ran into a familiar error message again.
I remember seeing it before, so I thought this was a good chance to write down the cause and the fix, and I'm sharing them here.
💥 Error message
Failed to load module script: Expected a JavaScript-or Wasm 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.
🔍 Cause
index.html was loading a module script like this.
<script type="module" src="/src/index.js"></script>Inside index.js, App.js was being imported.
import App from "./App";This is where the problem came from. When you use type="module", the browser requires the exact file extension.
If you only write "./App", the browser can't find the ./App path and ends up receiving a 404 page (HTML), so the MIME type becomes text/html and the error occurs.
✅ Fix
import App from "./App.js";Specifying the extension, as in the code above, fixes it.
📌 Summary
- When you use type="module", you must specify the .js extension in the import path
- If you don't, the browser can't find the file and returns a 404, and since HTML comes back as the response, a MIME type error occurs
- This happens often, especially when a dev server (e.g., Vite, Webpack Dev Server) redirects a wrong path to index.html
❓So why doesn't the error happen in React projects?
React projects usually use a bundler such as Webpack, Vite, or CRA (Create React App). These tools do the following:
- Even if you omit the .js extension, they resolve the file correctly internally and bundle it
- They analyze import paths and handle them automatically, even when the relative path or extension is missing
- During development, the dev server proxies the path or applies a fallback, so it returns the JS file instead of HTML
In other words, in a React environment, the dev server and the bundler prevent the error ahead of time and take care of path problems for you, so the same code doesn't produce the error.
In a Vanilla JS environment, though, these tools aren't there, so the browser interprets everything itself and applies strict rules. So I think I need to remember that when using module scripts, you must write the path and the extension exactly.
- #Failed to load module script error fix
- #failed to load module script: expected a javascript-or-wasm 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.
