Node server: Loading module was blocked because of a disallowed MIME type (“text/html”)

javascript node.js mime-types es6-modules

18,522

Essentially you have a server that for any given request, serves the content of your index.html file - regardless of what that request might look like. A browser therefore receives the HTML and begins to interpret it making another request for the src of your script tag and since the server only serves your index.html file, the browser receives your HTML file a second time when it expected javascript.

Typically you'd create a server first then construct responses based on the request as input. A primitive example of serving your static files how you intended might look like the following:

const http = require('http')
const fs = require('fs')
const PORT = 8080
http
    .createServer((request, response) => {
        fs.readFile(`.${request.url}`, (err, data) => {
            if (err) {
                response.writeHeader(404, {
                    'Content-Type': 'text/plain'
                })
                response.write('404 Not Found')
                response.end()
                return
            }
            if (request.url.endsWith('.html')) {
                response.writeHeader(200, {
                    'Content-Type': 'text/html'
                })
            }
            if (request.url.endsWith('.js')) {
                response.writeHeader(200, {
                    'Content-Type': 'application/javascript'
                })
            }
            response.write(data)
            response.end()
        })
    })
    .listen(PORT)

Do note that this example is too trusting of the client and you would normally want to sanitise the request in some way. I kept to vanilla javascript but once you're comfortable with how it works, it's worth checking out Express as it will simplify the routing / mime-type boilerplate etc.

18,522

Author by

Peter Petrus

Updated on June 05, 2022

Comments

Peter Petrus 7 months

I get the following error message when I try to run a local node server with a very simple application (see coding below).

Loading module from “http://localhost:8080/importing.js” was blocked because of a disallowed MIME type (“text/html”).

I am new to node and ES6 Modules so I dont really understand the details of the problem. According to this URL the mime-type 'application/javascript' has to be served explicitly for modules. But how do I achieve this in my example below?

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="./importing.js" type="module"></script>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

server.js

var http = require('http');
var fs = require('fs');
const PORT=8080;
fs.readFile('./index.html', function (err, html) {
    if (err) throw err;
    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(PORT);
});

importing.js

import {a} from './exporting.js';
console.log(a);

exporting.js

export const a = 'Constant a';

I start the server in CMD with

node server.js

Tanzeel about 3 years

I've created an express server. But I am unable to resolve MIME error with this solution. This is my [server.js][1] and this is my [api.js][2] [1]: github.com/tmtanzeel/social-coder/blob/master/server/server.‌js [2]: github.com/tmtanzeel/social-coder/blob/master/server/routes/‌…
Emissary about 3 years

I ran the api and the angular build and it seems to work as expected. It sounds like an issue with your server / environment but there's not enough information to reproduce the issue. In any case this would be better addressed as a separate SO question with MCVE.
Tanzeel about 3 years

Ok Sir. I understand. But I've already asked stackoverflow.com/questions/58173204/… and stackoverflow.com/questions/57978442/… Please help me.
Tanzeel about 3 years

and Please see stackoverflow.com/questions/58254370/… also. Thanks