Unable to access any objects or functions from within the browser console, yet everything works as intended?

Question

I am using "classses" with a bunch of static members to keep my very professional code somewhat organized. Like so:

index.html

<script type="module" src="client/js/main.js"></script>

main.js

import { UINav, UIDimension } from "./interface.js";
import { Dimension } from "./dimension.js";
import { InputFlex } from "./input.js";
function main() {
    Dimension.init();
    UIDimension.init();
    UINav.init();
    InputFlex.start();
}

My question: Why am I getting, for instance, Uncaught ReferenceError: InputFlex is not defined when I want to check stuff from inside the browser console, but all methods from the imports all execute as expected? How can I find my beloved "classes" from inside the browser?
I am using TypeScript also but I doubt that matters?
Edit: The files are fetched from a localhost server.

Edit: There seems to be a general problem in my environment where I cannot even find the main() function from inside the browser console. I am running a deno server. Could this be the root of my funny problem?
I am able to log stuff from inside the js files but not from the browser console where I am told everything is undefined, but evidently those entities exist somewhere, because everything is working as intended.

Edit: @iamimran input.js is literally just this:

export class InputFlex {
    static myMember123 = {...};
    static start() {...}
    (...)
}

Answer 1

Your imports show that you are working with ECMAScript modules.

One of the main motivations behind using modules is to not pollute the global name space, which means that any variables defined in your modules are private to that module, not global. This is called encapsulation.

If you want anything in a module to become a global variable, you explicitly need to "publish" it on the global object:

import { UINav, UIDimension } from "./interface.js";
import { Dimension } from "./dimension.js";
import { InputFlex } from "./input.js";

// to "publish":
Object.assign(globalThis, { UINav, UIDimension, Dimension, InputFlex });
// ...

Keep in mind that this is potentially dangerous because the above call to Object.assign would effectively overwrite any potentially already existing global variables (one of many reasons why you want to use the global name space as little as possible, preferrably not at all).

If your only intention is to "test" stuff in the console this is okay temporarily (!). If you're doing it for debugging purposes, it's better to outright use your browser's developer tools' debugger.