JavaScript: How To Use A Variable Or Function In An HTML File After Importing In A main.js File

I am trying to include multiple JS files into one main JS file (called main.js) and include that into my HTML file. One of those JS files have a set of variables (called variables.js) I want to use in my HTML file. I came across using the import/export modules so I tried to put this to use. While I was able to access the variables from variables.js within my main.js file, I am not able to access them in my HTML file. Everytime I run the code, I keep getting the following error:

index.html:38 Uncaught ReferenceError: arrStr1 is not defined at index.html

Below is a code sample of what I am trying to do:

variables.js file

let arrStr1 = ["John", "Doe", "Jane", "Doe", "Michael", "Smith"];

export { arrStr1 };

main.js file

import { arrStr1 } from "./variables.js";

index.html

<script src = "main.js" type = "module"></script>
<script>
console.log(arrStr1);
</script>

Please help me solve this problem. Thank you.