title: Trouble with ES6 Modules
body: <p><strong>Solved: Fixing the MIME types of my server fixed the problem.</strong> I had forgotten that I messed with them myself some time ago. Special Thanks to <a href="https://stackoverflow.com/users/7486612/sidney">@Sidney</a>, <a href="https://stackoverflow.com/users/3731501/estus">@estus</a> and <a href="https://stackoverflow.com/users/19750/josh-lee">@Josh Lee</a> for helping me out.</p>
  
  <hr>
  
  <p>Once I found a <a href="https://cdn.rawgit.com/jakearchibald/a298d5af601982c338186cd355e624a8/raw/aaa2cbee9a5810d14b01ae965e52ecb9b2965a44/index.html" rel="noreferrer">working live-demo</a> 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 (<a href="https://cdn.rawgit.com/jakearchibald/a298d5af601982c338186cd355e624a8/raw/aaa2cbee9a5810d14b01ae965e52ecb9b2965a44/index.html" rel="noreferrer">index.html</a>, <a href="//cdn.rawgit.com/jakearchibald/a298d5af601982c338186cd355e624a8/raw/aaa2cbee9a5810d14b01ae965e52ecb9b2965a44/utils.js" rel="noreferrer">utils.js</a>) 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?</p>
  
  <p><em>tl;dr: I found a working example of ES6 modules, but attempting to recreate it on my own local server does not work.</em></p>
  
  <p><strong>[Edit:]</strong> 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.</p>
  
  <p><strong>[Edit:]</strong> The <a href="https://jakearchibald.com/2017/es-modules-in-browsers/" rel="noreferrer">article</a> referenced by the MDN, containing the live-demo.</p>
  
  <p><strong>[Update:]</strong> It seems that the problem is with an incorrect MIME-type given by my local server when getting the module.</p>
  
  <hr>
  
  <p><em>index.html/test.htm:</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0"&gt;
  &lt;script type="module"&gt;
    import {addTextToBody} from './utils.js';
  
    addTextToBody('Modules are pretty cool.');
  &lt;/script&gt;
  </code></pre>
  
  <p><em>utils.js:</em></p>
  
  <pre><code>export function addTextToBody(text) {
    const div = document.createElement('div');
    div.textContent = text;
    document.body.appendChild(div);
  }
  </code></pre>
  
  <hr>
  
  <p><strong>mine:</strong>
  <a href="https://i.stack.imgur.com/40zlT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/40zlT.png" alt="Mine"></a></p>
  
  <p><strong>live-demo:</strong>
  <a href="https://i.stack.imgur.com/5azg2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5azg2.png" alt="enter image description here"></a></p>