title: In Webpack 4, can we dynamically generate page chunk with import() token so we can turn a react component into a react-loadable one?
body: <p>We use react and <a href="https://github.com/jamiebuilds/react-loadable" rel="nofollow noreferrer">react-loadable</a>.</p>
  
  <p>During our application initialization, we are verifying that the <code>component.preload</code> method is existing for each <code>&lt;Route /&gt;</code> we define.</p>
  
  <p>If the method is missing, we display a warning that show that the component should be loadable.</p>
  
  <p>We use webpack 4, is there a way to automatically wrap the component, so we don't have to do it manually?</p>
  
  <p>This is how a component look like:</p>
  
  <pre><code>/** MyComponent.js: page component */
  export default () =&gt; &lt;div&gt;Hello world&lt;/div&gt;;
  </code></pre>
  
  <p>This is the same component wrapped in a react-loadable component:</p>
  
  <pre><code>/**
   * preconfigured react-loadable 
   * See https://github.com/jamiebuilds/react-loadable#how-do-i-avoid-repetition)
   */
  import MyLoadable from '@scopped/react-loadable';
  
  /** loadable component */
  export default MyLoadable({
    loader: () =&gt; import('./MyComponent'), /** import page component */
  });
  </code></pre>
  
  <ol>
  <li>Our <code>&lt;Route /&gt;</code> are declared in <code>node_modules</code> and from within different packages. </li>
  <li>It may be declared using <a href="https://marmelab.com/react-admin/Resource.html" rel="nofollow noreferrer"><code>&lt;Resource /&gt;</code></a> (from <a href="https://github.com/marmelab/react-admin" rel="nofollow noreferrer">react-admin</a>) instead of <code>&lt;Route /&gt;</code></li>
  <li>They are not distributed in ESM format but only <strong>CJS</strong> (CommonJS). </li>
  </ol>