ES6 modules in local files - The server responded with a non-JavaScript MIME type

A simple fix for me that wasn't listed here was this:

I had an import statement bringing an object from a different file, which I did via this line:

import { Cell } from './modules/Cell';

What broke the code and caused the MIME type error was not having .js appended to the end of ./modules/Cell.

The updated line fixed my problem:

import { Cell } from './modules/Cell.js';

If you got onto this error message, it means that it's not a Same-origin issue.

As said in the error message, the real problem is that modules scripts require the MIME of your script file to be one of the javascript MIME types.

Your filesystem doesn't provide any MIME, hence the loading fails.

So the best solution is obviously to run your code on a local server, and not on the filesystem.

But since you do insist ;) One workaround is to first fetch your script file as Blob using XHR (fetch can't be used on file:// protocol), then force its type property to be one of js MIMEs, and set your <script>'s src to a blobURI poiting to this Blob.

// requires to start chrome with the --allow-file-access-from-file flag
var xhr = new XMLHttpRequest();
xhr.onload = e => {
    let blob = xhr.response;
    blob.type = 'application/javascript'; // force the MIME
    moduleScript.src = URL.createObjectURL(blob);
};
xhr.open('get', "yourmodule.js");
xhr.responseType = 'blob';
xhr.send();

BUT, you won't be able to import any dependencies from within your module.

ES6 module files are loaded using the standard Same-Origin policy restrictions that browsers enforce and have many other security restrictions in place, while JavaScript "script" files have much more lax security to avoid breaking existing websites as better security standards have been added to browsers over time. You are hitting one of them, which is that files must be sent with the correct MIME type.

file:// URLs are not normal HTTP requests, and as such they have different rules around requests. There's also pretty much no rules for what MIME type should be sent. If you want to use ES6 modules then you need to be running a real HTTP server locally to serve your files.