title: How to use import () to dynamically load components in React?
body: <p>I tried to use <code>import()</code> instead of <code>React.lazy</code> to dynamically load components, but it didn't work.</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { useState } from 'react';
  function App() {
    const [Com, setCom] = useState(null);
  
    const handleClick = () =&gt; {
        import("./A.js").then(c =&gt; {
          //console.log(c.default)
          setCom(c.default)
        }) 
    }
  
    return (
        &lt;div&gt;
          &lt;button onClick={handleClick}&gt;Load&lt;/button&gt;
          { Com ? &lt;Com /&gt; : null }
        &lt;/div&gt;
     );
  }
  
  export default App;
  </code></pre>
  
  <p>A.js</p>
  
  <pre><code>import React from "react";
  
  export default function A () {
      return (&lt;div&gt;A&lt;/div&gt;)
  }
  </code></pre>
  
  <blockquote>
    <p>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>
  </blockquote>
  
  <p>In fact, I printed out <code>c.default</code>. It's really a function.</p>
  
  <p>c.default</p>
  
  <pre><code>ƒ A() {
    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 4
      },
      __self: this
    }, "A");
  }
  </code></pre>