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

Question

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:

Answer 1

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.

Answer 2

I know that you're importing just the command, but I'll let you know my solution for this and see if you're interested. This error, for me, came from the import statement in your module. I was trying to import the entire file, with all functions and imports it had, while essentially using the same server and HTML.

my importing.js:

import * as Spotify from "./spotify-web-api.js";

window.basicAlert = function basicAlert() {
    alert("this is a test to see if basicAlert runs properly");
}

console.log("Should print to console with no error on imports");

I don't know the logic behind the import * as, but it worked to successfully import my file without throwing a MIME type error. As for the window.basicAlert =, Javascript apparently doesn't like to give any file that imports it access to its functions or variables unless it's manually attached to the window. You don't have this error now, but after the file imports successfully it will tell you that a isn't defined. While I have it attached to my function in importing.js, you'll need to put it in exporting.js like this:

const a = 'Constant a';
windows.a = a;

I didn't test that ^ but it makes sense to me. I hope this can help you out, or get closer, cause it solved my problem.