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:
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:
Share Improve this question edited Sep 20, 2017 at 10:39 Owen Pauling 11.9k20 gold badges57 silver badges67 bronze badges asked Sep 10, 2017 at 7:36 John SmithJohn Smith 5782 gold badges7 silver badges17 bronze badges 11- 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 Commented Sep 10, 2017 at 7:55
- 1 Please, provide a way to replicate the problem. See stackoverflow./help/mcve . For a simple setup a plunk would work. – Estus Flask Commented Sep 10, 2017 at 11:52
- 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 munity can help here. – Estus Flask Commented Sep 10, 2017 at 12:46
- 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 Commented Sep 10, 2017 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 Commented Sep 10, 2017 at 13:20
2 Answers
Reset to default 5The 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’.
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