Importing module in JS script inside HTML file

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.

Oh I can't believe I didn't know about seeing errors on the console, thank you! — Jordan Mitchell Barrett, Sep 25 '21 at 15:21

score 0 · Accepted Answer · answered Sep 25 '21 at 15:20

0

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.

answered Sep 25 '21 at 15:20

Jordan Mitchell Barrett

711
7
16

There's no difference between `script.js and `./script.js` – Barmar Sep 25 '21 at 15:21
You'd think so, but the `"script.js"` gave me a "file not found" error. – Jordan Mitchell Barrett Sep 25 '21 at 15:26
he's right using or omitting the `./` doesn't matter. – Kareem Kamal Sep 25 '21 at 17:34

score -1 · Answer 2 · answered Sep 25 '21 at 15:17

-1

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

answered Sep 25 '21 at 15:17

Oleg G

141
10

How do you know that the file doesn't exist? – Barmar Sep 25 '21 at 15:22

Importing module in JS script inside HTML file

2 Answers2