I'm writing JavaScript for the browser, my script.js has something like
import { foo, bar } from "./lib/sth.js"
function main() { ... }
Then I have this in my browser:
<script type=module src="./script.js"></script>
<body onload="main();"> ... </body>
But it's keep giving me this error:
Uncaught ReferenceError: main is not defined at onload ((index):7)
Why is my main now defined? It works fine before I use type=module, but with the import statement, I believe it has to be type=module
Thanks for @HereticMonkey and @FelixKling!
window.onload = function() { ... }
does work for my problem. Yet I'm confused why import is designed like this. Suppose I just wanna use some library in my script so I import it, why this makes my script has to be a module as well?
why this makes my script has to be a module as well? well, because you wrote <script type="module" ...>
import can only be used in a module scope. That's the whole point..h file is a declaration, while a .c is an implementation. It's generally bad practice to declare things in JavaScript without defining them in the same scope. Doing so is what leads to things like callback hell and questions that get closed as a duplicate of this or this.In JavaScript, module scope is not the same as global scope. When using ES6 modules (e.g., import and export), variables and functions are scoped to the module by default. They are not available globally unless explicitly assigned to the global scope.
If you want the main function to be globally accessible, you need to assign it to the window object yourself:
// main.js
function main() {
console.log('Hello, world!');
}
// Make main globally accessible
window.main = main;
This code ensures that main is available globally, allowing it to be called from anywhere in your application.
mainto be globally available, you need to do this yourself:window.main = main;.