Browser error 'Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"' after deploying a Vite/webpack single-page app. What is wrong?

Cause: the browser asked for a JavaScript module (a hashed file such as /assets/index-abc123.js) and got an HTML page back, almost always your index.html. Module scripts are checked strictly: the response must carry a JavaScript MIME type such as text/javascript, otherwise the browser refuses to run it. The HTML usually comes from one of these: - The SPA fallback rule (everything unknown goes to index.html) is answering for a missing JS file. The file is missing because the URL is wrong or because it no longer exists. - The app is deployed under a sub-path (for example /myapp/) but was built for the site root, so asset URLs point at the wrong place. - A new deployment deleted the old hashed files while a visitor's cached index.html or open tab still refers to them. - A server that does serve the file but with a wrong Content-Type (this gives a similar message that names the other type). Fix: 1. Open DevTools > Network, click the failed request and look at its URL and response. If it is the app's HTML, the path or the fallback is the problem. 2. Sub-path deployment: set the build's base path. In Vite use base: "/myapp/" in the config or the --base CLI flag; in webpack set output.publicPath. Rebuild and redeploy. For URLs you build in code, Vite exposes import.meta.env.BASE_URL. 3. Make the fallback rule apply only to navigation requests, not to real asset paths, and let real files take precedence (try_files $uri $uri/ /index.html in nginx does this). Do not let /assets/ requests fall through to index.html; return 404 for missing assets instead. 4. After deploys: serve index.html with Cache-Control: no-cache so clients pick up the new entry file, keep old hashed assets around for a while, and optionally listen for Vite's vite:preloadError event and reload the page. 5. If the server really sends a wrong type for module files, configure it to send text/javascript for .js/.mjs. Verify: the failing URL now returns the JavaScript file with Content-Type: text/javascript, and the page loads without the console error after a hard refresh. Sources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules https://vite.dev/guide/build.html https://nginx.org/en/docs/http/ngx_http_core_module.html