I'm trying to use ES6 modules in Firefox, but it does not work (WTF: unless loading from disk). I've boiled it down to this MWE, but can't see anything wrong with it:
HTML index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<script type="module" src="main.js"></script>
</head>
<body>
<p id="status">failed</p>
</body>
</html>
Module file.js
export const x = 42;
Main script main.js
import { x } from './file.js';
window.onload = function() {
document.getElementById('status').textContent = x;
};
Now, all these files are served correctly by NGINX:
$ cmp main.js <(curl 'localhost:8080/main.js' 2>/dev/null)
$ cmp file.js <(curl 'localhost:8080/file.js' 2>/dev/null)
$ cmp index.html <(curl 'localhost:8080/index.html' 2>/dev/null)
But it does not work in Firefox. Going to http://localhost:8080/ in
Firefox does not start the script, and on its Console it displays only
this message:
Loading failed for the module with source “http://localhost:8080/main.js”. localhost:8080:7
Without further info.
The Network tab shows that main.js is loaded, but file.js is not
even tried (i.e., it does not fail loading).
Of course, dom.moduleScripts.enabled;true in about:config.
Surprisingly, it works if I let FF load that stuff directly:
$ firefox index.html
Shows the 42 I was expecting to see.
Versions used:
Firefox Quantum 62.0 (64-bit), all add-ons disabled and restarted browser.
$ firefox -version Mozilla Firefox 62.0NGINX
$ nginx -v nginx version: nginx/1.14.0