CODEWITHSUNDEEP
javascriptecmascript-6importmodule
backspaces
backspaces

Reputation: 3942

es6 import using.mjs suffix fails with MIME error

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?.

Upvotes: 3

Views: 3800

Answers (1)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

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.

Upvotes: 6

Related Questions