Menu
Solved: Fixing the MIME types of my server fixed the problem. I had forgotten that I messed with them myself some time ago. Special Thanks to @Sidney, @estus and @Josh Lee for helping me out.
Once I found a working live-demo referenced on the MDN of ES6 Modules that just works in my current version of Chrome, I wanted to try to experiment with modules. Sadly I can't get anything module related to execute, even tho the live-demo works just fine. I even copied both files (index.html, utils.js) onto a directory on my server trying to recreate the live-demo exactly, but the thing still won't run even one single line of code. What am I missing? Could someone give me some hints about when module scripts execute and why mine doesn't?
tl;dr: I found a working example of ES6 modules, but attempting to recreate it on my own local server does not work.
[Edit:] Yes, the console is set to "Hide all". Both sites show a error for a missing favicon.ico though, so it has nothing to do with my problem.
[Edit:] The article referenced by the MDN, containing the live-demo.
[Update:] It seems that the problem is with an incorrect MIME-type given by my local server when getting the module.
index.html/test.htm:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<script type="module">
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
</script>
utils.js:
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}
mine:
live-demo:
387
ECMAScript 2015 (ES6) is Fully Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.
Pure and Non Pure Modules A module with side-effects is one that changes the scope in other ways then returning something, and it's effects are not always predictable, and can be affected by outside forces (non pure function).
The error message here is
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
This is a new requirement for web development which thus far could mostly get away with incorrect MIME types without much trouble.
Two quick web servers for local development which I know to have reasonable MIME handling are:
python3 -m http.server (see 1).npm i -g http-server && http-server (see 2).In your case, the error message is not being shown, indicated by
Hide all […] 1 item hidden by filters
Fix this by clicking ‘Hide all’ and choosing ‘Default’ (and you may wish to set this to ‘All levels’ while working). Or reset the devtools to its default state:
107
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
