Trouble with ES6 Modules

javascript google-chrome module ecmascript-6

34,931

Solution 1

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:

Python's: python3 -m http.server (see 1).
Node's http-server: 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:

Press F1 in the devtools (or choose menu > Settings).
Scroll to the bottom and click ‘Restore defaults and reload’.

Solution 2

I solved the problem using this yaml.

runtime: python38
service: yourservice

handlers:
  - url: /(.*\.(gif|png|jpg|less|json|woff|woff2|ttf|eot|scss|css|js|ico|svg)(|\.map))$
    static_files: dist/\1
    upload: dist/(.*)(|\.map)
  - url: /(.*)
    static_files: dist/index.html
    upload: dist/index.html

34,931

Author by

John Smith

Updated on July 09, 2022

Comments

John Smith almost 2 years
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: