How to use ES6 modules on Apache Server?

Question

I am trying to import ES6 modules within a HTML page, but I get the following error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

This html page is hosted on a Apache server, but to develop my app I use the WebStorm local server and it works.

Here is the code I use to import my modules :

<script type="module" src="js/TextAnalyzer.mjs" application=""></script>
<script type="module" src="js/Overlay.mjs"></script>
<script type="module" src="js/Main.mjs"></script>

I've tried both on Chrome and Firefox and I've the same problem.

How can I solve it?

Answer 1

This question was answered here. You basically need to create and .HTACCESS file and your project root directory where index.htm or index.html can be accessed, and add this code as its content:

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

es6 import using.mjs suffix fails with MIME error