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() {...}
(...)
}
Modules have their own scope. Variables declared inside them are not global.
This is a good thing: Global variables lead to conflicts and make maintenance and debugging harder.
If you want to access them from the developer tools console then you will need to move the console into the scope of the module, e.g. by setting a breakpoint there.
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 be better to outright use your browser's developer tools debugger.