title: module.default is undefined dynamic import
body: <p>I'm trying to use React.lazy to lazy load a React Component.
  The component looks like this:</p>
  
  <pre><code>function App() {
  const HubScreen = React.lazy(() =&gt; import("./screens/hub").then((mod) =&gt; {
      console.log(mod.default)
      return mod.default;
  }));
  
  return (
      &lt;BrowserRouter&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
              &lt;MainContaier&gt;
                  &lt;div id="screen"&gt;
                      &lt;CssBaseline /&gt;
                      &lt;Switch&gt;
                          &lt;React.Suspense fallback={&lt;h1&gt;Loading...&lt;/h1&gt;}&gt;
                              &lt;Route exact path="/" component={HomeScreen} /&gt;
                              &lt;Route path="/hub" render={() =&gt; &lt;HubScreen /&gt;} /&gt;
                          &lt;/React.Suspense&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/MainContaier&gt;
          &lt;/MuiThemeProvider&gt;
      &lt;/BrowserRouter &gt;
  ) 
  }
  </code></pre>
  
  <p>And this is the component I'm importing</p>
  
  <pre><code>import React from "react";
  
  function HubScreen() {
    return (
        &lt;div&gt;Hi&lt;/div&gt;
    );
  }
  
  export default HubScreen;
  </code></pre>
  
  <p>When I navigate to <code>/hub</code> I see the value of <code>mod.default</code> as undefined. Along with my Chrome window becoming completely unresponsive, requiring a force stop.</p>
  
  <p>I know that my path to the module <code>./screens/hub</code>, is correct because, if I put a fake path like <code>./screens/hube</code> then webpack gives me the error: </p>
  
  <pre><code> Module not found: Error: Can't resolve './screens/hube' in '/home/travis/Workspace/avalon/assets/js'
  </code></pre>
  
  <p>I'm stumped haven't found a similar problem anywhere.</p>
  
  <p><a href="https://stackoverflow.com/a/53698239/2801159">This answer</a> gave me some insight as to why my browser was hanging up. However I still seem to have the same root problem; the undefined module.default. After changing the root component to this: </p>
  
  <pre><code>const HubScreen = React.lazy(() =&gt; import("./screens/hub"));
  
  function App() {
  return (
      &lt;BrowserRouter&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
              &lt;MainContaier&gt;
                  &lt;div id="screen"&gt;
                      &lt;CssBaseline /&gt;
                      &lt;Switch&gt;
                          &lt;React.Suspense fallback={&lt;h1&gt;Loading...&lt;/h1&gt;}&gt;
                              &lt;Route exact path="/" component={HomeScreen} /&gt;
                              &lt;Route path="/hub" component={HubScreen} /&gt;
                          &lt;/React.Suspense&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/MainContaier&gt;
          &lt;/MuiThemeProvider&gt;
      &lt;/BrowserRouter &gt;
  )
  }
  </code></pre>
  
  <p>I get the War: </p>
  
  <pre><code>Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]
  
  Your code should look like: 
    const MyComponent = lazy(() =&gt; import('./MyComponent'))
  </code></pre>
  
  <p>And then the error:</p>
  
  <pre><code>Uncaught Error: Element type is invalid. Received a promise that resolves to: undefined. Promise elements must resolve to a class or function.
  </code></pre>
  
  <p>Which I have taken to mean that undefined is being returned from the import resolution, as the console.log seems to confirm.</p>