Getting an 'Uncaught SyntaxError: import declarations may only appear at top level of a module' error with Hangman Game code

I am learning web development and trying to use Vanilla JS to create a Hangman Game. The game runs as expected with a words array in the main.js file but when I import words from a different file, Browser shows the error "Uncaught SyntaxError: import declarations may only appear at top level of a module".

I fixed this by specifying type = "module" in the index.html file but now, I am getting reference error: "Uncaught ReferenceError: hangman is not defined" (hangman is an instance of the Hangman object).

I tried adding a function and calling it using the load eventListener but the issue persisted.

I am primarily wondering about:

1. Is there another way to fix the syntax error about "import declerations".
2. Why am I getting the reference error even though I have set 'hangman' as a global variable in main.js?

P.S - I am not sure about how much info to add so here is the github link for main.js and index.html. I will appreciate feedback on my question to make sure I ask questions more efficiently from the next time.

• Because you use javascript module syntax you have to declare <script type='module'> you can omit this syntax or use compiler (esbuild, webpack...) if you don't want to use type='module'

• You get hangman is undefined error because hangman is declared in main.js and main.js is imported as a module so it is local please include functions like logAndCreateButton in main.js or in main.js use window.hangman = hangman (not recommended) to solve the problem

After taking a look at the code, I found the error is being caused beacuse of the defining order, inside index.html there is a <script> tag that you define your on load that on click calls hangman.reset() but hangman inside the scope of that script is not defined, by moving all of the content of the script tag into the main.js file now the hangman instance is in scope of the logAndCreateButton function and that should fix your issue.

TLDR: move the contents of the script that is inside index.html into main.js