In the latest chrome browser

import foo from '../dist/foo.mjs'

fails with

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.

But if I copy the file to foo.js

import foo from '../dist/foo.js'

works!

I am using the mac os x built-in Apache server with localhost paths and the latest chrome.

So somehow es6 imports are sensitive, in the browser, to the preferred node suffix of .mjs.

The import is in a html file with <script type="module"> rather than a separate module file, but I doubt that is the problem.

Is there a solution to this?.

In the latest chrome browser

import foo from '../dist/foo.mjs'

fails with

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.

But if I copy the file to foo.js

import foo from '../dist/foo.js'

works!

I am using the mac os x built-in Apache server with localhost paths and the latest chrome.

So somehow es6 imports are sensitive, in the browser, to the preferred node suffix of .mjs.

The import is in a html file with <script type="module"> rather than a separate module file, but I doubt that is the problem.

Is there a solution to this?.

• javascript
• ecmascript-6
• import
• module

1 Answer 1

You need to usa an .htaccess file or extend your Apache config file with the following htaccess directive in order for the server to output files with the mjs extension with the correct MIME type:

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

Of course, mod_mime needs to be installed and enabled for this to work.