title: Awaiting a dynamic import
body: <p>I've created a web application with React and Typescript, using <a href="https://github.com/wmonk/create-react-app-typescript" rel="noreferrer">create-react-app</a>. It uses a rather heavy third party library. I want to exclude that from the main bundle by using <a href="https://basarat.gitbooks.io/typescript/docs/project/dynamic-import-expressions.html" rel="noreferrer">dynamic import expressions</a>.</p>
  
  <p>So, instead of doing <code>import { Component } from 'library'</code>, I've created a little wrapper that looks like this:</p>
  
  <pre><code>const loadLibrary = async () =&gt; {
      const x = await import('library').then((r) =&gt; r);
      return x;
  };
  const {
      Component,
  } = loadLibrary() as any;
  
  // tslint:disable-next-line:no-console
  console.log(`typeof Component is ${typeof Component}`);
  
  export {
      Component,
  };
  </code></pre>
  
  <p>And then, in my app, I'd use <code>import { Component } from '../library-wrapper.ts'</code>.
  Because the wrapper uses dynamic import expressions, Webpack creates a separate chunk which is only downloaded by the browser then it is actually needed. <code>\o/</code>.</p>
  
  <p>But the bad news is: my wrapper doesn't actually await the dynamic import expression. It invokes the <code>loadLibrary()</code> function but immediately continues execution, logging</p>
  
  <blockquote>
    <p>typeof Component is undefined</p>
  </blockquote>
  
  <p>So when I attempt to use the <code>Component</code>, React crashes:</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.</p>
  </blockquote>
  
  <p>Any suggestions what is going on?</p>