I am trying to build a simple web app. I have an html file set up like this:

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <link rel="stylesheet" href="styles.css"> 
       <script  src="index.js"></script>
        <script src="messages.js"></script>
    </head>
    <body>
        <div id="cborHeader">
            <h1>CBOR Message Validator</h1>     
        </div><br>
        <div id="index_description">
            App Description here
        </div><br><br>
        <div>
            <form name="cborMessages">
                <p>
                    Select a CBOR message category
                </p>
                <select name="dropDownMenu" id="dropDownMenu" onchange="goToNewPage(this.value)">
                   <option value="usrmngmt.html">1-39 User Management</option>
                </select>
            </form>
        </div>

    </body>
</html>

```

Then I have 2 .js files. index.js for declaring functions and messages.js for object data base. Trying to keep them apart to avoid overcrowding index.js.
goToNewPage() that is invoked in HTML is defined in index.js like this:

```
    function goToNewPage(src){
             window.location=src;
    }; 

```

When I import messages.js into index.js,
`const { default: messages } = require("./messages");`
the function goToNewPage() cannot be invoked in index.html. As soon as I remove the import script, the problem goes away and html is using this function without any problems.

What am I doing wrong? How can I import messages.js AND be able to invoke all functions in index.html?