title: Awaiting on dynamic imports in JavaScript
body: <p>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:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>(async function () {
      await import('./firstLevel1.js');
      await import('./firstLevel2.js');
   })()
  </code></pre>
  
  <p><strong>firstLevel1.js</strong></p>
  
  <pre><code>(async function () {
      await import('./secondLevel1.js');
      await import('./secondLevel2.js');
  })()
  </code></pre>
  
  <p><strong>firstLevel2.js</strong></p>
  
  <pre><code>(async function () {
      await import('./secondLevel3.js');
      await import('./secondLevel4.js');
  })()
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/ttgnd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ttgnd.png" alt="enter image description here"></a></p>
  
  <p>This is becoming problematic for me since the order of JS load is not what I want to set up my legacy files correctly.</p>
  
  <p>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?</p>