ES6 modules in local files. The server responded with an asymmetric MIME type

Question

I get this error:

Failed to load the script module: the server responded with the asymmetric MIME type "". Strict MIME type checking is used for module scripts for the HTML specification.

The project is run from the local files, eg .: file:///D:/path/project.html.

It works without problems in Firefox, but does not work in Google Chrome. I want to test it this way for development purposes - it is more convenient than creating a server and remembering which port it is on.

Answer 1

If you get this error message, it means that this is not a problem with the same release.

, , , MIME script MIME javascript.

MIME, .

, , , , .

;) - script, Blob XHR (fetch file://), type jM MIME, <script> src blobURI 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();

, import .

Answer 2

, , :

, , :

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

MIME, .js ./modules/Cell.

:

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

Answer 3

ModuleSpecifier data URI

<script type="module">
  import {Test} from "data:application/javascript,const%20Mod={this.abc=123};export%20{Mod};";
  console.log(Test);
</script>

ModuleSpecifier Chromium/Chrome --allow-file-access-from-files XMLHttpRequest() JavaScript file:

<script>
(async() => {

  const requestModule = ({url, dataURL = true}) => 
    new Promise((resolve, reject) => {
      const request = new XMLHttpRequest();
      const reader = new FileReader();
      reader.onload = () => { resolve(reader.result) };
      request.open("GET", url);
      request.responseType = "blob";
      request.onload = () => { reader[dataURL ? "readAsDataURL" : "readAsText"](request.response) };
      request.send();
   })

  let moduleName = `Mod`;
  // get `Mod` module
  let moduleRequest = await requestModule({url:"exports.js"});
  // do stuff with `Mod`; e.g., `console.log(Mod)`
  let moduleBody = await requestModule({url:"ModBody.js", dataURL: false}); 
  let scriptModule = `import {${moduleName}} from "${moduleRequest}"; ${moduleBody}`;
  let script = document.createElement("script");
  script.type = "module";
  script.textContent = scriptModule;
  document.body.appendChild(script);

})();
</script>

Answer 4

ES6 Same-Origin, , JavaScript "script" , -, . , MIME.

file:// URL- HTTP-, . , MIME . ES6, HTTP- , .

Answer 5

Windows ES 2016 . , : .js MIME, : MIME JavaScript "". MIME HTML.

The answer is to use Safari on a Macintosh computer, which allows local files to work seamlessly with ES 2016 modules. Interestingly, both Chrome and Firefox also do not work properly. Honestly, this is a mistake, because when loading a local file there is absolutely nothing unsafe when accessing files from the same folder. But good luck with Google or Firefox to fix it. Apple even has a cross-scripting permissions flag in their drop-down menu, so they know how important it is to disable meaningless security features.