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-25 14:02:55Z

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, 2021 at 14:02

answered Sep 25, 2021 at 12:30

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jordan Barrett Over a year ago

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.

Emiel Zuurbier Over a year ago

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.

Jordan Barrett Over a year ago

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 Barrett Over a year ago

Never mind, the issues were with my local setup (specifically I needed a local server to import the .js files, see here). I've got your code working now.

Collectives™ on Stack Overflow

HTML: using external .js file with import statements

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related