title: Dynamic Import and Lazy load React Components
body: <p>I am trying to load a components inside of a Tab component for react. The Idea is have a json ( or better yaml) with this syntanx:</p>
  
  <pre><code>interface TabType {
      name: string;
      components: string[];
  }
  
  interface Templates {
      tabs: TabType[];
  }
  
  const templateTabsModules: Templates = {
      tabs: [
          {
              name: "Title for Tab 1",
              components: ["./components/OneComponent"]
          },
          {
              name: "Title for Tab 2",
              components: ["./components/TwoComponent"]
          }
      ]
  };
  </code></pre>
  
  <p>So inside of the Main Component do something like: </p>
  
  <pre><code>&lt;Tabs id="tab"&gt;
     {templateTabsModules.tabs.map(tab =&gt; {
        return (
          &lt;Tab title={tab.name}&gt;
            &lt;p&gt;The component should appears bellow:&lt;/p&gt;
            &lt;Suspense fallback={&lt;div&gt;Loading&lt;/div&gt;}&gt;
             {tab.components.map(component =&gt; {
                const Comp = lazy(() =&gt; import(component));
                return (&lt;Comp /&gt;)
             })}
            &lt;/Suspense&gt;
           &lt;/Tab&gt;
         );
      })}
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>But this code does not work, I could see that if I use just the path as string by doing <code>const Comp = lazy(() =&gt; import('./components/OneComponent'));</code> it works, but does not if I use the dynamic variable.</p>