Menu
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
982
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
