title: ES6 module fails on Safari mobile (iOS14.6)
body: <p>I'm experimenting with Javascript modules both via desktop (latest Chrome) and mobile (Safari with iOS 14.6) and my code works perfectly on the desktop (standard browser or mobile emulation mode) but fails on my iPhone. The imported JS code using <code>&lt;script type=&quot;module&quot;&gt;</code> simply doesn't execute despite being supported since Safari iOS 11 onward according to <a href="https://caniuse.com/?search=modules" rel="nofollow noreferrer">https://caniuse.com/?search=modules</a></p>
  <p>The test code below, adapted from <a href="https://stackoverflow.com/questions/62104153/how-to-serve-es6-modules-on-safari">How to serve ES6 modules on Safari?</a> , is hosted on a webserver in my local network reachable by both the mobile &amp; desktop clients. For mobile debugging I'm using a locally copied version of <a href="https://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/" rel="nofollow noreferrer">https://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/</a> to render console.log commands on mobile.</p>
  <p><strong>test_ios.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;script&gt;
        console.log(&quot;Start of test_ios.html...&quot;);
      &lt;/script&gt;
      &lt;title&gt;TESTS IOS&lt;/title&gt;
      &lt;script src=&quot;/static/hnl.mobileConsole.1.3.js&quot;&gt;&lt;/script&gt;
      &lt;script nomodule src=&quot;/static/fallback.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;module&quot;&gt;
          console.log(&quot;Starting the main script.&quot;);
        
          // The following line seems to cause an error in Safari only
          import { TestClass } from './static/test_module.js';
        
          // The rest is not executed due to the error
          let test_class = new TestClass;
          console.log(&quot;Done.&quot;);
      &lt;/script&gt;
      &lt;script&gt;
          console.log(&quot;End of test_ios.html...&quot;);
      &lt;/script&gt;
      &lt;body&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>/static/test_module.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class TestClass {
      constructor() {
        console.log(&quot;Created a test class in test_module.js&quot;);
        document.body.append(&quot;test_module.js&quot;);
      }
    }
  </code></pre>
  <p><strong>/static/fallback.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>console.log(&quot;Fallback.js&quot;);
  document.body.append(&quot;Fallback&quot;);
  </code></pre>
  <p><strong>Result on the desktop, as expected</strong></p>
  <p>Test string <code>test_module.js</code> gets written onto the web page &amp; the following lines are in the console:</p>
  <pre><code>--==## Mobile Console v1.3.5 active ##==--
  End of test_ios.html...
  Starting the main script.
  Created a test class in test_module.js
  Done.
  </code></pre>
  <p><strong>Result on iOS 14 - neither the module JS nor the fallback get executed</strong></p>
  <p>The page is blank (no <code>document.body.append(...)</code> was executed) &amp; only the following lines are in the console:</p>
  <pre><code>--==## Mobile Console v1.3.5 active ##==--
  End of test_ios.html...
  </code></pre>
  <p>Further checks already done:</p>
  <ol>
  <li>I sniffed the network and I see that <code>/static/test_module.js</code> is requested by the mobile device (no request for <code>fallback.js</code>).</li>
  <li>The content-type of <code>/static/test_module.js</code> returned by the webserver seems coherent (<code>application/javascript; charset=utf-8</code>).</li>
  <li>Renaming <code>test_module.js</code> to <code>test_module.mjs</code> doesn't help (same outcome as above)</li>
  </ol>