title: Uncaught Error: Cannot Find Module When Using Dynamic Import for JavaScript
body: <p>I'm using Create-React-App and am looking to use the dynamic import() supported by webpack 2.0 to import a module based on a variable string.</p>
  
  <p>I've looked at the official proposal (<a href="https://github.com/tc39/proposal-dynamic-import" rel="noreferrer">https://github.com/tc39/proposal-dynamic-import</a>) and it seems possible to do something like this:</p>
  
  <pre><code>import(`./language-packs/${navigator.language}.js`)
  </code></pre>
  
  <p>But it breaks when I try something similar.</p>
  
  <p><em>AppRoutes.js</em></p>
  
  <pre><code>import LazyLoad from 'services/LazyLoad';
  
  export class AppRoutes extends React.Component {
    render() {
      return (
        &lt;Switch&gt;
          &lt;Route
            exact path="/"
            render={(matchProps) =&gt; (
              &lt;LazyLoad
                absoluteModulePath='pages/default/HomePage'
                getComponent={() =&gt; import('pages/default/HomePage')}
                {...matchProps}
              /&gt;
            )}
          /&gt;
        &lt;/Switch&gt;
      );
    }
  }
  
  export default AppRoutes;
  </code></pre>
  
  <p><em>pages/default/HomePage/index.js</em></p>
  
  <pre><code>import React from 'react';
  
  export const HomePage = () =&gt; {
    return (
      &lt;div&gt;
        I'm the default HomePage
      &lt;/div&gt;
    );
  }
  
  export default HomePage;
  </code></pre>
  
  <p><strong>BROKEN</strong> <em>services/LazyLoad/index.js</em></p>
  
  <pre><code>import React from 'react';
  
  export class LazyLoad extends React.Component {
    ...
  
    componentDidMount() {
      import(this.props.absoluteModulePath)  // Critical dependency: the request of a dependency is an expression
        .then(module =&gt; module.default)
        .then(AsyncModule =&gt; this.setState({AsyncModule}))
    }
  
    ...
  }
  
  export default LazyLoad;
  </code></pre>
  
  <p>Error:</p>
  
  <p><a href="https://i.stack.imgur.com/ic3ix.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ic3ix.png" alt="enter image description here"></a></p>
  
  <p>But when I change the LazyLoader to </p>
  
  <p><strong>WORKING</strong> <em>services/LazyLoad/index.js</em></p>
  
  <pre><code>import React from 'react';
  
  export class LazyLoad extends React.Component {
    ...
  
    componentDidMount() {
      this.props.getComponent()
        .then(module =&gt; module.default)
        .then(AsyncModule =&gt; this.setState({AsyncModule}))
    }
  
    ...
  }
  
  export default LazyLoad;
  </code></pre>
  
  <p>it works.</p>
  
  <p><a href="https://i.stack.imgur.com/kBPai.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kBPai.png" alt="enter image description here"></a></p>
  
  <p>The absolute paths is something built into create-react-app with the help of environment variables.</p>
  
  <p><em>.env</em></p>
  
  <pre><code>NODE_PATH=src/
  </code></pre>
  
  <p>I require dynamically loading modules this way to build a proof of concept for multi-tenancy. How can I fix the broken LazyLoad such that I can pass a string as a prop and have the LazyLoad component dynamically load the component from that string prop?</p>