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

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.

javascript mime-types

Solution 1:^[1]

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 file to see the headers and the content of the response.

Solution 2:^[2]

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.

Solution 3:^[3]

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

The same error may arise if you 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';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Calypso
Solution 3

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]