title: How to serve ES6 modules on Safari?
body: <p>I have a question regarding the usage of ES6 modules within Safari. It's driving me crazy because it prevents me from sharing my website with Safari users. </p>
  
  <p>My web application and the coming up MWE <strong>work perfectly fine</strong> in the following environments:</p>
  
  <ul>
  <li>Windows: Chrome, Edge and Firefox both via a Windows local server (WAMP) and via my web server;</li>
  <li>Mobile: Chrome, Firefox (both in Android and iOS). Even Samsung Mobile and Opera for Android work fine.</li>
  <li>MacOS:
  
  <ul>
  <li>on <strong>Safari</strong>, Chrome and Firefox <strong>via a Mac local server</strong> (AMPPS);</li>
  <li>on Chrome and Firefox via my web server.</li>
  </ul></li>
  </ul>
  
  <p>However, my web application <strong>does not work within MacOS Safari via my web server</strong> (at the moment I'm trying this code on Safari 13.0.4, but all modern versions of the mentioned browsers behave the same way with respect to this problem). Similarly, it does not work within the latest version of iOS Safari.</p>
  
  <p><strong>MWE</strong></p>
  
  <p><em>./test_class.js</em></p>
  
  <pre class="lang-js prettyprint-override"><code>export class TestClass {
    constructor() {
      console.log("Created a test class");
    }
  }
  </code></pre>
  
  <p><em>./index.html</em></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;script type="module"&gt;
    console.log("Starting the main script.");
  
    // The following line seems to cause an error in Safari only
    import { TestClass } from './test_class.js';
  
    // The rest is not executed due to the error
    let test_class = new TestClass;
    console.log("Done.");
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Console Output</strong></p>
  
  <p>When I load <em>index.html</em> from my server, Safari's console gives me the error</p>
  
  <blockquote>
    <p>TypeError: 'text/html' is not a valid JavaScript MIME type.</p>
  </blockquote>
  
  <p><strong>Additional info (not sure if it's relevant)</strong></p>
  
  <p>When I go to the resource section of Safari, there is indeed an entry for <em>test_class.js</em> that does not contain the code above but instead:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;body&gt;
      &lt;script type="text/javascript" src="/aes.js" &gt;&lt;/script&gt;
  
      &lt;script&gt;
        function toNumbers(d)
          // ...
        function toHex()
          // ...
        var a = toNumbers("..."),
            b = toNumbers("..."),
            c = toNumbers("...");
        document.cookie = "...";
  
        location.href="http://www.my_super_website.com/test_class.js?i=1";
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This only occurs when I connect to my server. Does the line <code>location.href="http://www.my_super_website.com/test_class.js?i=1";</code> make sense? My understanding is that at this point Safari tries to load <em>test_class.js</em> but has some issue with it.</p>
  
  <p><strong>What I've tried so far</strong></p>
  
  <ul>
  <li>If I remove the line <code>import { TestClass } from './test_class.js';</code>, everything works fine.</li>
  <li>The same problem occurs if I place the <code>import</code> call within a new script file that is then used in the html document.</li>
  <li>I verified that my way of naming the file <em>./test_class.js</em> is correct, but since this works in most browsers I guess it's fine.</li>
  <li>I'm using a free-hosting solution, infinityfree.net, so maybe there's something going on there?</li>
  </ul>