在 HTML 文件中的 JS 脚本中导入模块

Question

Why does line 3 break this example? It works fine with line 3 commented out.

<button id="button">Click me</button>
<script type="module">
  import { foo } from "script.js";    // BREAKS THINGS

  document.getElementById("button")
    .addEventListener("click",
      function(){ alert("hello") } );
</script>

Tested in MS Edge 93.

Answer 1

Well firstly, "script.js" should be "./script.js" . After that, the console shows an error

Access to script at 'file:///C:/Users/jordanb/Dropbox/Git/test/script.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests are only
supported for protocol schemes: http, data, chrome-extension, edge, https,
chrome-untrusted.

The fix is to use a server as in this question .

Answer 2

It breaks your code, since script.js doesn't exist. In order to be able to import the module you have to add it before using