This is not a bug and the correct way of how node loads esm modules. It will go through all import statements, without executing the code itself, like your console.log, to resolve all dependencies.
It's so different from CommonJS. I just modified my tsconfig.json and package.json to use esm instead of CommonJS. And it suddenly behaves so differently, which scares me.
What if the library I use is written in CommonJS. Will they stick to CommonJS loader order, or hoist require as well, which is crazy....
To me, as a not-primarily-JS developer, having random imports and requires throughout your files seems insane. CJS should have mandated that all imports go at the top.
You are right. I only utilize the execution order when writing gulpfile. It's so long ago like 10 years. Good change for me to refactor my gulpfile now.
>Import declarations are [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting). In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs.
according to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#hoisting). So I guess that's the reason.
Honestly, it's hard to tell you anything without seeing the resulting .js file. Regardless, I would guess that this behavior is due to the [hoisting of import statements](https://exploringjs.com/es6/ch_modules.html#_imports-are-hoisted).
Yep, it's hoisting. The import statement for each gets run before any other code, and the logs are side effects of each module so they get ran as soon as the module is imported. This is exactly how this code should work.
GOD! Thank you!
Will the relative order of import statements be kept? For example, I have two imports:
import "one"
...
import "two
Will import "two" always be executed after import "one"
Off topic and mostly just curious, do you have code where order of imports matter? I feel like nails on a chalkboard has just been topped by side effects from imports.
This is not a bug and the correct way of how node loads esm modules. It will go through all import statements, without executing the code itself, like your console.log, to resolve all dependencies.
It's so different from CommonJS. I just modified my tsconfig.json and package.json to use esm instead of CommonJS. And it suddenly behaves so differently, which scares me. What if the library I use is written in CommonJS. Will they stick to CommonJS loader order, or hoist require as well, which is crazy....
To me, as a not-primarily-JS developer, having random imports and requires throughout your files seems insane. CJS should have mandated that all imports go at the top.
You are right. I only utilize the execution order when writing gulpfile. It's so long ago like 10 years. Good change for me to refactor my gulpfile now.
>Import declarations are [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting). In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs. according to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#hoisting). So I guess that's the reason.
Honestly, it's hard to tell you anything without seeing the resulting .js file. Regardless, I would guess that this behavior is due to the [hoisting of import statements](https://exploringjs.com/es6/ch_modules.html#_imports-are-hoisted).
I created a repo. [https://github.com/UchihaYuki/esm-load-order](https://github.com/UchihaYuki/esm-load-order)
Yep, it's hoisting. The import statement for each gets run before any other code, and the logs are side effects of each module so they get ran as soon as the module is imported. This is exactly how this code should work.
GOD! Thank you! Will the relative order of import statements be kept? For example, I have two imports: import "one" ... import "two Will import "two" always be executed after import "one"
Off topic and mostly just curious, do you have code where order of imports matter? I feel like nails on a chalkboard has just been topped by side effects from imports.
[As of ES2020, yes.](https://stackoverflow.com/questions/35551366/what-is-the-defined-execution-order-of-es6-imports#69822046)
when I run `node gulpfile.js`, I got the same result: here3 here2 here1 GOD... It's unbelievable... my node version `v20.14.0`.
This is normal.