I'm learning about JS and I started my first project so I decided to keep it organized while divide my app.js in some files.
My problem is that when I start a module my console doesn't let me access document's variables, so I think the problem is in the scope, but I don't know why, I searched about scope and modules and I don't know what I'm doing wrong
The files are:
- index.html
- app.js
- variables.js
HTML code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="app.js" type="module"></script>
    </body>
</html>
app.js code:
import { var1 } from "./variables.js";
console.log(var1);
variables.js code:
export const var1 = "var1";
In my console will appear console.log(var1) output as expected but if I try to type "console.log(var1)" or just call "var1" it will throw the following error: 
PS: I use VSCode live server extension in order to use modules in vanilla js. PS: I know that I have to declare the variables in window scope but I thought I wasn't recommended, is there another way?
I expected to access variables, objects and functions in the console for debuggin purpose...
