Module was blocked because of a disallowed MIME type ("text/html")

Asked 30/9, 2019 at 18:17 Answered 29/3 at 20:7

I'm surprised that there are so many questions regarding the same problem but there are no good answers anywhere. In fact this question doesn't even have a single answer. Anyway, my problem is much similar. Everything was working fine before I decided to run my frontend and backend both on same port (PORT 3000 in my case). I followed these steps:

Used ng build --prod to compile development file. A dist folder was created.
Then just uploaded all the server files and dist folder to server.
And run the server using pm2. The command is pm2 start server.js.

Well I know from where did these lines come in index.html:

script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"

script src="polyfills-es2015.5728f680576ca47e99fe.js" type="module"

script src="runtime-es5.741402d1d47331ce975c.js" nomodule>

script src="polyfills-es5.7f43b971448d2fb49202.js" nomodule>

script src="main-es2015.ec7a803b995f0d691eeb.js" type="module">

script src="main-es5.1cd51b4ce24f28c1391b.js" nomodule>

But now they are creating these errors:

Loading module from “http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js” was blocked because of a disallowed MIME type (“text/html”).

I tried setting type=text/javascript and many more solutions and hacks. But nothing is working.

PS: Here is the entire project before build. View its README also.

Vacua answered 30/9, 2019 at 18:17 Comment(1)

This sounds like a duplicate of your previous question. What changed, how are they different? – Ventage 12/10, 2019 at 22:25

Perhaps not directly relevant for the OP, but may help others that end up here.

The same error may arise if your import statement does not have the .js extension.

For example, during local development in Firefox (v94), a main script trying to import from a "module" in the same folder, as follows, will generate the error:

import { MyClass } from './my_module';

This can be fixed by adding the .js extension:

import { MyClass } from './my_module.js';

Stopper answered 28/11, 2021 at 22:48 Comment(3)

what about when your code is in TypeScript and should be importing TS files, not JS files? – Glaydsglaze 17/5, 2023 at 0:9

@Glaydsglaze Sorry, not sure how to answer that. Perhaps this answer helps? – Stopper 17/5, 2023 at 6:2

Good call. Also just happened to me with any typo in the name of the import file. – Neoterize 7/5 at 16:43

The problem you have, is that your javascript files are not being found by the server. It returns an error header with status code like 404 (Not Found), 401 (Unauthorized) and an html page somewhere along these lines:

<html>
    <body>
    ERROR 404: NOT FOUND
    </body>
</html>

Since the browser expects a javascript file (the default MIME Type of the script element is type="text/javascript"), it will complain when it receives an HTML-file.

You can see the server response (status code and the actual html) in the developer tools of your browser. Go to the Network tab and click one of the javascript files to see the headers and the content of the response.

Stag answered 21/4, 2021 at 20:25 Comment(1)

May I add that the JS files are mot likely not found due to the <base href="\"> definition in the index.html – Buttons 14/11, 2021 at 12:11

For me, the error got solved when I served my dist folder with app.use(express.static(path.join(__dirname, "..", "dist")));. Your path may be different.

Before serving the static JS files, the server wasn't able to find them, but now he does.

Frankel answered 4/1, 2022 at 15:40 Comment(0)

I was messing with my tsconfig.

restarting the vite server fixed it.

Famed answered 7/5, 2023 at 20:51 Comment(0)

I had this issue when using node and the google Firebase API - here is what fixed it for me:

Loading module from “http://127.0.0.1:8080/node_modules/firebase/app/” was blocked because of a disallowed MIME type (“text/html”)
Loading failed for the module with source “http://127.0.0.1:8080/node_modules/firebase/app”.

Here was my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href-".">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="firebaseConfig.js" ></script>
    <title>B and L Landscaping</title>
</head>
<body>
    
</body>
</html>

The issue was with my script tag - by adding "text/javascript", the browser was able to import all modules.

<script type="module/text/javascript" src="firebaseConfig.js"></script>

Firefox v124.0.1 - 3/29/24

Splurge answered 29/3 at 20:7 Comment(0)

Recommended topics

Hot tags