Question

我正在尝试在Firefox中使用ES6模块，但是它不起作用（WTF：除非从磁盘加载）。我已经将其归结为该MWE，但是不能看到有什么问题：

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>

模块file.js

export const x = 42;

主脚本main.js

import { x } from './file.js';

window.onload = function() {

    document.getElementById('status').textContent = x;

};

现在，所有这些文件都可以由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)

但是在Firefox中不起作用。前往http://localhost:8080/ Firefox不会启动脚本，并且在其控制台上仅显示此消息：

Loading failed for the module with source “http://localhost:8080/main.js”. localhost:8080:7

没有更多信息。

“网络”标签显示已加载main.js，但未加载file.js 甚至尝试过（即加载不会失败）。

当然是dom.moduleScripts.enabled;true中的about:config。

令人惊讶的是，如果我让FF直接加载这些东西，它会起作用：

$ firefox index.html

显示我期望看到的42。

使用的版本：

Firefox Quantum 62.0（64位），已禁用所有附加组件并重新启动了浏览器。
```
$ firefox -version
Mozilla Firefox 62.0
```
- NGINX
  
  $ nginx -v nginx版本：nginx / 1.14.0

Answer 1

查看HTML服务器中的Content-Type标头。改变解决了问题。它必须是text/javascript。感谢Chris G的有用评论。

Answer 2

同一问题，不同的情况：我使用了webpack，并且在Firefox控制台中得到了相同的警告，因为我链接了我的脚本，而不是捆绑文件。

新手错误，但 humernum est 。也许可以帮助某人。

MWE：无法加载ES6模块

2 个答案: