Why does Webpack resolve a module before the module it imports?

Question

webpack

Good evening.
I'm not entirely sure what specific technology this behavior is associated with - the case is very strange, and this is the first time I've encountered this. There is an application on Vue + MobX State Tree + Typescript, created it through Vue Cli third version. I assume that this is either Webpack or Vue Cli configured the same webpack by default - default webpack configs are used in the bowels of this tool.
In general, I create a mobx store, and declare in a separate module the useSnapshot function, which, by design, is a closure over the store object. This is done so that all useSnapshot imports use the same store instance.
The problem is that the code in useSnapshot.ts is executed BEFORE the code in store.ts, but how can that be? I imported the module! He must come to me fully resolved!

// store.ts
import { types } from 'mobx-state-tree';

console.log('store.ts'); // выведется в консоль ВТОРЫМ, должен первым

const store = App.create({
    // ...
});
export default store;


// useSnapshot.ts
import { getSnapshot } from 'mobx-state-tree';
import store from '@/store'; // при первом импорте undefined

console.log('useSnapshot.ts'); // выведется в консоль ПЕРВЫМ, должен вторым

// из-за этого не работает корректно данная функция, т.к. она должна
// вызваться в момент импорта и сохранить в себе ссылку на объект стора
// как такое возможно? store.ts ЯВНО импортирован выше
const useSnapshot = (() => {
  const _store = store;

  return () => getSnapshot(_store);
})();

Why, even purely theoretically, is this possible? Any ideas or suggestions, perhaps you have come across this?
Thanks in advance.

Answer 1

perhaps you have a cyclic addiction and it has resolved in this way.
try this https://github.com/aackerman/circular-dependency-plugin - I haven't used it, I won't share my real experience,
well, in general, you can check it with a debug why and what exactly happens in runtime.