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

failed to load module script: the server responded with a non-javascript mime type of "text/plain"
script type=module
cannot use import statement outside a module
electron es6 import
syntaxerror: cannot use import statement outside a module typescript
electron import module
cannot use import statement outside a module vue
electron esm

I get this 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.

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

Works without problems in Firefox, but doesn't work in Google Chrome. I want to test it this way for development purposes - it's more comfortable than creating a server and remembering what port is it on.

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.

Electron ES6 module import, The file protocol you use client:// has to set the correct mime-types you recive a The server responded with a non-JavaScript MIME type of ""� Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec . This happens in Google Chrome and any modern browser that supports JavaScript modules.

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';

JavaScript modules, Most servers already set the correct type for .js files, but not yet for .mjs files. You need to pay attention to local testing — if you try to load the HTML file locally and AMD module systems (as explained nicely in ES6 In Depth: Modules error like "The server responded with a non-JavaScript MIME type". 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.

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.

After upgrading to Angular 8, production builds can't load: Failed to , load: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". What happens if you serve a production build yourself locally? Angular 7 .js files have the type="text/javascript" where the Angular 8 index.html script files Instead the example there shows es2015 (which is es6). I get Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. after importing axio

You can set the ModuleSpecifier to a data URI

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

to set the ModuleSpecifier programmatically you can launch Chromium/Chrome with --allow-file-access-from-files flag and utilize XMLHttpRequest() to request a JavaScript file from file: protocol

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

Script type module not working in chrome. � Issue #949 � novnc , In vnc.html file, following line is throwing the exception: <script src="app/ui.js" A quick google search: https://stackoverflow.com/questions/46138375/trouble-with- es6-modules ui.js:1 ---> Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type� Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. Attempt 3

On Windows, i cannot get ES 2016 modules to load correctly. Even if you disable security, then you get hit by the next prolem which is the .js files don't have a MIME type set, so you get a message like 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.

The answer is to use Safari on the macintosh, which allows local files no problem with ES 2016 modules. Interestingly both Chrome and Firefox also fail to work properly. Frankly this is a bug, because when you are loading a local file, there is absolutely nothing insecure about accessing files from the same folder. But good luck getting Google or Firefox to fix this. Apple even has a flag about cross-scripting permissions in their pulldown menu, so they know how important it is to disable nonsense security stuff.

824651, Failed to load module script: The server responded with a non-JavaScript MIME This is apparently because ES6 modules require MIME type to load, OS Version: 6.1 (Windows 7, Windows Server 2008 R2) (Although I feel it is not so helpful because testing locally with --allow-file-access-from-files will� Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. Additional information: I started developing a custom panel using the panel_custom component and Polymer 3.0. After trying to deploy it into Home Assistant I found out that

Comprehensive Guide to Javavscript Modules, Definition of modules The ES6 Modules Digging more on ES6 file to be deployed in the production environment (the web server) <script src="src/with- modules/main.js" type="module"></script> - Pay In chrome we'll get this error message: Failed to load resource: the server responded with a status of� Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec. So proper way will be to load javascript file which will export js object:

Integrate <myscript-math-web> into my own software following , 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. / es6-modules-in-local-files-the-server-responded-with-a-non-javascript-mime-typ. Patch chromium commit to fix es6 loading bug that caused 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. to be thrown when es6 modules attempted to be loaded.

ES6 modules in chrome extensions — An introduction, As of version 61, Chrome added support for ES6 module. a function with the export statement and save it in a file called module.js : Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Start whatever server, that responds with correct MIME types, so that you can access script.js file through it. I ran Node's http-server on localhost , at port 80. Change the <script> tag to reference the same file on the server.

Comments
  • You need to set up a local HTTP server. Using file: URLs is never a good idea because it fails to behave like a real page would.
  • The end users receive the page packed with webpack. But for me, it's most comfortable to test with files. I can start python or node.js server, I just don't wanna.
  • Actually, I just tried and.. you are not facing this same-origin restriction. It's just like the error message states: they do a strict check against js MIME type, your filesystem doesn't provide any.
  • Well then the question is how to disable that check for local files, right?
  • I don't suppose you ever got a workable answer for this? I'd love to have a workaround.
  • This doesn't really help but kudos for the workaround. Can come in handy in other situations...
  • @TomášZato note that it might be possible through chrome scripts (extension) to force the MIME in such cases, using the webRequest API, but I don't know it enough to show exactly how to procede...
  • What if you are running this on a local server, and still getting this issue?
  • I have a module with zero imports in it, so this should work. But it still fails to load the script because of CORS policy: Access to XMLHttpRequest at 'file:///Users/test.js' from origin 'null' has been blocked by CORS policy
  • Wow. Yup. Right here. Makes sense, too, because this explicitly tells it what type the import module is
  • @Jona yeah it made sense in hindsight but I was going out of my mind trying to figure it out.
  • Haha I'm glad you found it before I stumbled upon the same issue :p