ES6 Modules/Imports in Apache Cordova Hybrid App Throw MIME Type Error

Question

I'm trying to use ES6 Modules in a hybrid mobile app built using Apache Cordova. Unfortunately, Cordova seems to be serving the module without a MIME type, which is throwing an error in the WebView (In both Chrome 63 and 64 beta).

Specifically, the deployed app (using chrome remote debugger) throws the following 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.

I'm using a bog standard ES6 import, which is now supported in the targeted version of chrome.

<!--index.html-->
<script type="module">
    import App from "./app.js"
    import config from "./config.js"
    window.app = new App(config)
</script>

Everything works properly when the prebuild assets are served over a webserver rather than deployed through Cordova. Transpiling through Babel might be an option, but it seems like a huge headache and I'd rather not go down that path until I know there's no better option.

Any advice?

Answer 1

I wound up solving this problem by using webpack to compile all of my code and assets into a single file. This allowed the use of import syntax without all of the associated problems in Apache Cordova. It's not as good as native support, but it was the best solution for me.

Answer 2

File system fetched files do not have a MIME type, but due to a tightened security ES6 modules must be served only with "application/javascript" MIME type.

As a workaround you may include (like I did) a web server in your app. See, for example, cordova-httpd.