Javascript modules do not seem to work in webextensions. If I create a Javascript file and add it to my popup's HTML like this:

<script type="module" src="script_name.mjs"></script>

The script will be loaded if I host it locally, but will not work it I load it in the popup or using the moz-extension:// URL. The console error it gives is:

Loading failed for the module with source “moz-extension://<snip>”.

I made these example extensions that demonstrate the problem. They are the same extension, except that the one called "working" uses <script src="script.mjs"></script>, while the one called "not_working" uses <script type="module" src="script.mjs"></script>.

When the "working" popup loads, the Javascript immediately runs, changing the title in the popup to "Javascript loaded!". When the "not_working" popup loads, the javascript does not run, leaving the popup's title as "Javascript did not load".

Weirdly enough "not_working" actually works for me .. I think changing the file extension from ".mjs" to ".js" should work. I think we set the Content-Type for moz-extension: based on some internal list or maybe file associations by the OS?
Edit: Pretty sure it's doing both SetContentType ends up calling nsExternalHelperAppService::GetTypeFromExtension

Yeah, es6 modules require strict content types, which means it will only work with .js files from web extensions.

The problem is, unlike a web server, the extension can't easily set a custom content type for its own files (intercepting via webRequest might work, but it's obviously not a real solution).

We can either relax that requirement for modules from extensions, or more realistically just add a mapping for *.mjs, since that's almost an official extension (nodejs reserves it for es6 modules).

Also, if I'm reading the above-linked code right, it seems weird that we lookup content types from the OS first, which means things that depend on strict content types might randomly break based on user's local OS settings. :/

I can confirm that renaming the script from script.mjs to script.js does seem to make the extension work for me.

I definitely feel that the .mjs extension ought to work. The reason I was using it is specifically because MDN says:

Note: In native JavaScript modules, the extension .mjs is important because it imports the files with a MIME-type of javascript/esm (another JavaScript-compatible MIME-type such as application/javascript will do), which will avoid strict MIME type checking errors like "The server responded with a non-JavaScript MIME type". In addition, the .mjs extension is good for clarity (i.e. this file is a module, and not just regular JavaScript) and for interoperability with other tools. See Google's note for further details.

The priority flag is not set for this bug.
:jimm, could you have a look please?

For more information, please visit auto_nag documentation.

Seems like this is the recommended MIME type for the JavaScript module system:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#Basic_example_structure

https://hg.mozilla.org/mozilla-central/rev/4d198d162b2a

Hello,

Verified the fix on the latest Nightly (72.0a1/20191118093852) under Windows 10 Pro 64-bit and MacOS Catalina 10.15.

Tested with the attached extensions, the title in the pop-up being “Javascript loaded!” for both extensions, thus confirming the fix.

For further reassurance that the issue is indeed fixed, I also tested on the latest Beta, with the following results:

• with the “working” extension, the title in the popup is “Javascript loaded!”
• with the “not working” extension, the title in the popup is “Javascript did not load”

, further confirming the fix.