title: Using dynamic import within a Webpack-exported library
body: <p>I am exporting a React component as a library via Webpack. <em>Within that library</em>, I have several <code>React.lazy()</code> calls performing dynamic imports:</p>
  
  <p><strong>library.tsx:</strong></p>
  
  <pre><code>import React from 'react';
  const ComponentCheap = React.lazy(() =&gt; import('./ComponentCheap/index');
  const ComponentExpensive = React.lazy(() =&gt; import('./ComponentExpensive/expensive');
  export default function LibComponent(props) {
      return (&lt;div&gt;
          &lt;Suspense fallback="Loading..."&gt;
              (props.useExpensive ? &lt;ComponentExpensive /&gt; : &lt;ComponentCheap /&gt;)
          &lt;/Suspense&gt;
      &lt;/div&gt;)
  }
  </code></pre>
  
  <p>That library is in turn being <code>React.lazy()</code> loaded in the consuming application:</p>
  
  <p><strong>app.tsx:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  const LibComponent = React.lazy(() =&gt; import('@mystuff/library'));
  
  ReactDOM.render((
      &lt;Suspense fallback="Loading..."&gt;
          &lt;LibComponent /&gt;
      &lt;/Suspense&gt;
  ), document.body);
  </code></pre>
  
  <p>Here is the problem: When webpack generates the library bundle, it correctly splits out <code>ComponentCheap</code> and <code>ComponentExpensive</code> into separate chunks, placed properly in the library file, but generates code to load those chunks as if they were on the root of the application instead:</p>
  
  <pre><code>var ComponentCheap = react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(function () { return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./ComponentCheap/index */ "./src/ComponentCheap/index.tsx")); });
  var ComponentExpensive = react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(function () { return __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(null, /*! ./ComponentExpensive/index */ "./src/ComponentExpensive/index.tsx")); });
  </code></pre>
  
  <p>And on the root application, that's exactly what happens - the <code>React.lazy()</code> loads are executed and try to fetch <code>http://&lt;domainname&gt;/0.index.js</code> and <code>http://&lt;domainname&gt;/1.index.js</code>, rather than the correct library path as it should be.</p>
  
  <p>Is this currently a bug/deficiency in Webpack, in that libraries simply do not support using dynamic import internally yet, or is there something in the Webpack config that I need to do to enable this? Do I need to signal in the library's Webpack config that it's also exporting chunks alongside the main module? Does the application need to have something set inside its own Webpack config in order to pick up on those chunks?</p>