Awaiting on dynamic imports in JavaScript

Question

While trying to port some of our JS code to use modules, I ran into this peculiar case which I couldn't explain. I was setting up my main JS file to have dynamic imports for my main entry points and they in turn have imports for all the files they require. The setup would be something like below:

index.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()

firstLevel1.js

(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()

firstLevel2.js

(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()

Since some of the code I am importing is legacy code I had setup the script tag for index.js as async="false" to ensure all the files are loaded in the correct order. In this particular example I would have expected the load order to be index.js, firstLevel1.js, secondLevel1.js, secondLevel2.js, firstLevel2.js. secondLevel3.js and finally secondLevel4.js. But when I look at the load order in chrome this is what I see.

This is becoming problematic for me since the order of JS load is not what I want to set up my legacy files correctly.

Why is the load order I am seeing different from what I would have expected? Is there any way to get them to load synchronously?

Answer 1

It's a bit nasty, but one way it works is as follows:

in firstLevel?.js, export an async function that you will await for in index.js

index.js

(async function () {
    await (await import('./firstLevel1.js')).default();
    await (await import('./firstLevel2.js')).default();
})();

firstLevel1.js

export default async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
};

firstLevel2.js

export default async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
};

it's probably not going to be that useful for your actual requirements, but it does load the modules in the order you expect