“Encrypt/Decrypt” is not defined while exporting nodule to an HTML file from a JS file

I am creating a program that emulates the Vigenere cipher algorithm in JavaScript. I am also creating an HTML page that would allow a user to type in a plain text phrase and encrypt/decrypt the message. When I type my plaintext message and enter in a key value, I get an error message ‘encrypt is not defined.’ I do not believe that my .js file is importing my functions correctly, or if the file is importing the functions, then I am not seeing my error. Could I get some insights into why I am not reaching my desired output?

function encrypt(plaintext, key) {
    if (!plaintext || !key || typeof plaintext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
        throw new Error('Invalid input: plaintext and key must be non-empty strings containing only alphabetic characters.');
    }

    var ciphertext = "";
    var keyIndex = 0;

    for (var i = 0; i < plaintext.length; i++) {
        var char = plaintext[i];

        if(/[a-zA-Z]/.test(char)) {
            var isUpperCase = char === char.toUpperCase();
            var plainCharCode = char.toUpperCase().charCodeAt(0) - 65;
            var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
            var encryptedCharCode = (plainCharCode + keyCharCode) % 26 + 65;

            ciphertext += isUpperCase ? String.fromCharCode(encryptedCharCode) : String.fromCharCode(encryptedCharCode).toLowerCase();
            keyIndex++;
        } else {
            ciphertext += char;
        }
    }

    return ciphertext;
}

function decrypt(ciphertext, key) {
    if (!ciphertext || !key || typeof ciphertext !== 'string' || typeof key !== 'string' || key.match(/[^a-zA-Z]/)) {
        throw new Error('Invalid input: ciphertext and key must be non-empty strings containing only alphabetic characters.');
    }

    var plaintext = "";
    var keyIndex = 0;

    for (var i = 0; i < ciphertext.length; i++) {
        var char = ciphertext[i];

        if (/[a-zA-Z]/.test(char)) {
            var isUpperCase = char === char.toUpperCase();
            var cipherCharCode = char.toUpperCase().charCodeAt(0) - 65;
            var keyCharCode = key[keyIndex % key.length].toUpperCase().charCodeAt(0) - 65;
            var decryptedCharCode = (cipherCharCode - keyCharCode + 26) % 26 + 65;

            plaintext += isUpperCase ? String.fromCharCode(decryptedCharCode) : String.fromCharCode(decryptedCharCode).toLowerCase();
            keyIndex++;
        } else {
            plaintext += char;
        }
    }

    return plaintext;
}

export { encrypt, decrypt };

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Assignment 4 - JavaScript</title>
  <script src="vigenere.js"></script>
  <style>
    .container {
      width: 50%;
      margin: auto;
    }
    .result {
      margin-top: 20px;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Vigenere Cipher</h2>
    <form id="cipherForm">
      <div>
        <label for="plaintext">Plaintext:</label><br>
        <textarea id="plaintext" name="plaintext" rows="4" cols="50"></textarea>
      </div>
      <div>
        <label for="key">Key:</label><br>
        <input type="text" id="key" name="key">
      </div>
      <div>
        <button type="button" onclick="encryptText()">Encrypt</button>
        <button type="button" onclick="decryptText()">Decrypt</button>
      </div>
      <div class="result">
        <label for="ciphertext">Ciphertext:</label><br>
        <textarea id="ciphertext" name="ciphertext" rows="4" cols="50" readonly></textarea>
      </div>
      <div class="error" id="errorMessage"></div>
    </form>
  </div>

  <script>
    function encryptText() {
      var plaintext = document.getElementById("plaintext").value;
      var key = document.getElementById("key").value;
      try {
        var ciphertext = encrypt(plaintext, key);
        document.getElementById("ciphertext").value = ciphertext;
        document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
      } catch (error) {
        document.getElementById("errorMessage").textContent = error.message;
      }
    }

    function decryptText() {
      var ciphertext = document.getElementById("ciphertext").value;
      var key = document.getElementById("key").value;
      try {
        var plaintext = decrypt(ciphertext, key);
        document.getElementById("plaintext").value = plaintext;
        document.getElementById("errorMessage").textContent = ""; // Clear any previous error messages
      } catch (error) {
        document.getElementById("errorMessage").textContent = error.message;
      }
    }
  </script>
</body>
</html>