HTML: using external .js file with import statements

Question

I have an HTML file ~/docs/index.html which has an internal JavaScript script to allow input/output with two text areas. This internal JS script, in turn, calls an external JS script ~/src/Main.js which I have imported in the head of my HTML file.

Everything seems to work great, until my ~/src/Main.js needs to import other external JS files. Then, things no longer seem to work.

~/docs/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <base href="../" target="_blank">

    <!-- JavaScript imports -->
    <script type="module" src="src/Main.js"></script>
  </head>

  <body>
    <main>
      <div>
        <textarea
          id="input"
          oninput="update()"
          placeholder="Type here!"
        ></textarea>
        <textarea id="output" readonly>no way</textarea>
      </div>
      
      <!-- Textarea script -->
      <script>
        // Updates the textarea
        function update() {
          let input = document.getElementById("input");
          let output = document.getElementById("output");
      
          output.value = doubleIt(input.value);
        }
      </script> 
    </main>
  </body>
</html>

~/src/Main.js:

import "./OtherClass.js";   // THIS LINE BREAKS THINGS

export function doubleIt(input) {
  return input + input;
}

I've seen this question but the solutions there don't seem to work for me. Any help appreciated.

Emiel Zuurbier · Accepted Answer · 2021-09-25T14:02:55.990

1

Every script that uses the import / export syntax that is included in the DOM must have type="module" attribute.

If the inline script uses any functions from a module, then they also need to be imported first.

Note: avoid inline event listeners like oninput and add event listeners through JavaScript, as with modules the update function will no longer be a global value.

<script type="module">
  import { doubleIt } from "./src/Main.js";

  let input = document.getElementById("input");
  let output = document.getElementById("output");

  function update() {
    output.value = doubleIt(input.value);
  }

  input.addEventListener('input', update)
</script>

edited Sep 25 '21 at 14:02

answered Sep 25 '21 at 12:30

Emiel Zuurbier

19,095
3
17
32

So do I need to add `type="module"` to the internal script as well? It seems that once I do this, I can no longer access the page elements. – Jordan Mitchell Barrett Sep 25 '21 at 13:18
I've done some more testing and have come to new conclusions. Yes the inline (internal) script also needs to be specified as a `type="module"`. Otherwise it won't be able to use any import and export statements. – Emiel Zuurbier Sep 25 '21 at 14:03
The `import` statement in this internal script is still breaking things somehow. Your code doesn't work as is, but it works if I comment out the import and replace `doubleIt(input.value)` with something else. – Jordan Mitchell Barrett Sep 25 '21 at 14:39
1

Never mind, the issues were with my local setup (specifically I needed a local server to import the .js files, see [here](https://stackoverflow.com/q/59912641/15219560)). I've got your code working now. – Jordan Mitchell Barrett Sep 25 '21 at 15:29

HTML: using external .js file with import statements

1 Answers1