JavaScript Modules fail to load on some devices

[AshleyScirra]

Bug Report

Problem

Recently we've been migrating our code to JavaScript Modules. However we've found on some devices, JavaScript Modules fail to load in Cordova.

What is expected to happen?

Install and open the app. On some devices, it fails to get past the splash screen.

What does actually happen?

On some devices, it works. On others, it fails. The problem appears to be the following console error message:

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 app includes a module script as: <script src="scripts/main.js" type="module"></script>

It appears the strict MIME type checker for modules is failing to identify the MIME type for the given script. However the script is loaded from a file: protocol in Cordova. Therefore it is not possible to configure a Content-Type HTTP header.

Information

Presumably the WebView is not being told that the local .js file has the MIME type "application/javascript", and instead gets an empty string, which appears in the error message.

Perhaps cordova-android can be updated to fix this.

Command or Code

Demo APK: https://www.dropbox.com/s/2payb5y2lpcdkro/testOOO.android.debug.apk?dl=0
Cordova project: https://www.dropbox.com/s/zudv2ooa83gzv4u/testOOO.zip?dl=0

Environment, Platform, Device

From my test of four devices I got the following results:
Google Pixel 3 / Android 11: Pass
Google Nexus 9 / Android 7.1.1: Fail
Samsung Galaxy S8 / Android 8: Fail
HTC 10 / Android 8: Fail
I don't know it works on some devices and fails on others, but it makes it a nasty gotcha for development.

Version information

Built with Cordova CLI and [email protected].

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[breautek]

JavaScript modules is not suppose to work at all because of additional security...

You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a file:// URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#Other_differences_between_modules_and_standard_scripts

So I'm surprised that Google Pixel 3 / Android 11 is actually working and that might be a webview bug in itself. Can you record the webview versions installed on each of those devices? I believe you can find it in the App List and also probably in the Developer Settings.

[AshleyScirra]

I believe all the devices were updated to the latest WebView (M87).

Surely it can't be left as "JavaScript Modules cannot be used in Cordova"? It would simply rule out using modern JavaScript in Cordova, creating a major compatibility hurdle.

Perhaps this is another reason to support a custom scheme or domain for local content.

[breautek]

t would simply rule out using modern JavaScript in Cordova, creating a major compatibility hurdle.

I agree, I was just simply stating that currently Cordova doesn't support JavaScript Modules. The last time this was brought to any level of discussion, potential solutions were kinda sparse. However today, the Android SDK may offer a solution. I'll explain...

Schemes are implemented for android on the ionic webview, however a Google engineer have approached Ionic in this thread about potential problems and some flaws that makes schemes incredibly hard to maintain backwards compatibility and thus discouraged it's use.

The same engineer suggested that using WebAssetLoader may be a sufficient alternative to avoid CORS issues on android, and some work is being done to get that implemented in this PR -- perhaps that will also address this issue for Javascript Modules. You'll need to enable AndroidX in your project but maybe give it a try.

[AshleyScirra]

Ah, OK. I see, well if the next major version of Cordova introduces a HTTP based URL one way or another, that should solve this and a bunch of other significant problems (e.g. fetch not working). I'll be sure to try it out when it's released!

[jcesarmobile]

As explained, this is a file protocol issue, not a cordova-android issue.
You can use cordova-plugin-ionic-webview or any other plugin that serves files without using file and subscribe to #1135 that is for implementing the assets loader so it can be done without additional plugins.

[avrim-tr]

Hey, we face such issue too, from reading the comment @breautek , we try to understand what was causing the issue as stated in mdn, is it CORS? but if so, how is it that the errors are

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

[jcesarmobile]

When you use file protocol the mime type is not set correctly.

Anyway, cordova-android 10+ apps are served from https now, so if you are not using that version, update and use http or https.
If you are in that version, then create a new issue because then it might be a cordova-android bug, this shouldn't happen if using http or https to load the app.

[AshleyScirra]

Note that it can be tricky to migrate existing apps to a new protocol, as it wipes all storage unless you come up with some way to migrate storage between protocols. So it might be worth investigating the issue on the file protocol for legacy apps that face migration hurdles.