7

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: Mine

live-demo: enter image description here

Owen Pauling
  • 11,349
  • 20
  • 53
  • 64
John Smith
  • 570
  • 2
  • 7
  • 17
  • 1
    I'd expect at least an error in the console... after staring at this for a while, I realized you have all console messages hidden. In the console, click "Hide all" and select "Default". What does it say now? – Sidney Sep 10 '17 at 07:55
  • You're right (weird, I don't remember setting it to hide). It says that it can't find favicon.ico, which it only does on the localhost one. – John Smith Sep 10 '17 at 07:59
  • Nevermind, it shows the error for the missing favicon on both sites. – John Smith Sep 10 '17 at 08:04
  • 1
    Please, provide a way to replicate the problem. See http://stackoverflow.com/help/mcve . For a simple setup a plunk would work. – Estus Flask Sep 10 '17 at 11:52
  • @estus Not sure how much more I could describe the problem. If you click the link to the live-demo and you are using Chrome/Chromium (version 60+), you will most likely find that it works (prints out the message to the document). Yet if you download both the main html and the referenced script and try to host them on a local server and access them through the same browser (recreating the live-demo as close as possible on a local server), you can find them not working anymore (no printed message, no code executed, but also no error message). – John Smith Sep 10 '17 at 12:35
  • 1
    *you can find them not working anymore* - I probably won't that's why a way to replicate it is necessary. Since client side is supposed to work, it is server side which wasn't covered in the question. Check Network tab and look what happens there. Since currently you're the only person who can debug it, I don't see how the community can help here. – Estus Flask Sep 10 '17 at 12:46
  • The networking is both the same, both files download ok from both servers, except that my localhost connection is not secured (simple http, not https). But I doubt that this is the problem. I'd be curious if someone else would get different results if they tried to recreate the live-demo the same way I did. – John Smith Sep 10 '17 at 12:55
  • I think I found a possible cause. My server hands out the script with an improper MIME type ('text/html') while in the article it states that the MIME type has to be exact. – John Smith Sep 10 '17 at 13:19
  • 1
    You didn't even specified if util.js loaded or not. It could have wrong MIME type that would prevent it from execution. It should work as expected, and it shouldn't try it to confirm that it works. It's asker's responsibility to provide a way to recreate it. If you want the others to check it, provide a way to fully replicate it. If the question involves web server, create a repo that sets up Node web server. – Estus Flask Sep 10 '17 at 13:19
  • 1
    Yes, this was my point. It's one of possible scenarios that won't cause an error in console. – Estus Flask Sep 10 '17 at 13:20
  • the MIME issue was resolved by fixing a httpd.conf, everything seems to be working now. :-) (just wish the whole mime thing would have been prompted to me via console error message) – John Smith Sep 10 '17 at 16:26

2 Answers2

5

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:

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

  1. Press F1 in the devtools (or choose menu > Settings).
  2. Scroll to the bottom and click ‘Restore defaults and reload’.
Josh Lee
  • 171,072
  • 38
  • 269
  • 275
  • Yeah, I fixed the MIME issue which was due to me messing with httpd.conf a few months/years ago. Everything is working now. Thanks for the answer. – John Smith Sep 10 '17 at 16:24
1

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
M_S_N
  • 2,764
  • 1
  • 17
  • 38
Nelson González
  • 7
  • 2