Search code examples
javascripthtmlmacossafaries6-modules

How to serve ES6 modules on Safari?

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.

My web application and the coming up MWE work perfectly fine in the following environments:

  • Windows: Chrome, Edge and Firefox both via a Windows local server (WAMP) and via my web server;
  • Mobile: Chrome, Firefox (both in Android and iOS). Even Samsung Mobile and Opera for Android work fine.
  • MacOS:
    • on Safari, Chrome and Firefox via a Mac local server (AMPPS);
    • on Chrome and Firefox via my web server.

However, my web application does not work within MacOS Safari via my web server (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.

MWE

./test_class.js

export class TestClass {
  constructor() {
    console.log("Created a test class");
  }
}

./index.html

<!DOCTYPE html>

<script type="module">
  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.");
</script>

Console Output

When I load index.html from my server, Safari's console gives me the error

TypeError: 'text/html' is not a valid JavaScript MIME type.

Additional info (not sure if it's relevant)

When I go to the resource section of Safari, there is indeed an entry for test_class.js that does not contain the code above but instead:

<html>
  <body>
    <script type="text/javascript" src="/aes.js" ></script>

    <script>
      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";
    </script>
  </body>
</html>

This only occurs when I connect to my server. Does the line location.href="http://www.my_super_website.com/test_class.js?i=1"; make sense? My understanding is that at this point Safari tries to load test_class.js but has some issue with it.

What I've tried so far

  • If I remove the line import { TestClass } from './test_class.js';, everything works fine.
  • The same problem occurs if I place the import call within a new script file that is then used in the html document.
  • I verified that my way of naming the file ./test_class.js is correct, but since this works in most browsers I guess it's fine.
  • I'm using a free-hosting solution, infinityfree.net, so maybe there's something going on there?
Solution

  • In web development we develop using ES6 and ES7 but those are not supported yet in all browsers.

    In order to ship the working code in most browsers (Safari - Chrome - IE9 )

    and does not matter the browser. You supposed to use a build process like ( webpack - gulp - grant ) or using existing libraries like ( React, Angular and VUE )

    Example: For starting using webpack https://webpack.js.org/guides/getting-started/

    witch will grant you get a complete working code by converting all your code into ES5 and bundle that code to ensure reducing chuck sizes