title: Dynamic import in react not working when trying to import a component in another directory
body: <p>Hello everyone I have been trying dynamic imports in react for rendering my components for an app created with CRA (create-react-app) and while it works perfectly for some cases but for some it returns a cannot load module error for instance I loaded a component(placed in a directory under src) dynamically in  my <code>index.js</code> which works fine but when I try to render a child or nested component inside that also with a dynamic import approach it gives error cannot load module. Note this error occurs only if the nested component is placed outside the directory of the original parent component enough talk here is the code.</p>
  
  <p>My index.js  placed under src.</p>
  
  <pre><code>    import React, { Component } from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
  
      class Dynamic extends Component {
        constructor(props) {
          super(props);
          this.state = { module: null };
        }
        componentDidMount() {
            console.log('in comp mount')
            //alert("in comp mount")
          const { path } = this.props;
          import(`${path}`)
            .then(module =&gt; this.setState({ module: module.default }))
       }
        render() {
            console.log('in render')
           // alert("in render")
          const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
          return(
            &lt;div&gt;
              {Component &amp;&amp; &lt;Component path= '../FooterComp/Footer' /&gt;}
            &lt;/div&gt;
          )
        }
      }
  
  ReactDOM.render(&lt;Dynamic path='./Components/FirstComponent' /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>FirstComponent.js  placed in Components directory under src.</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from '../logo.svg';
  import '../FirstApp.css';
  
  class App extends Component {
  
      constructor(props) {
      super(props);
      this.state = { module: null };
    }
    componentDidMount() {
        console.log('in comp mount')
        //alert("in comp mount")
      const { path } = this.props;
      alert(path)
      import(`${path}`)
        .then(module =&gt; this.setState({ module: module.default }))
   }
  
    render() {
        const { module: Component } = this.state;
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;p&gt;
              Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
            &lt;/p&gt;
            &lt;a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            &gt;
              Learn React
            &lt;/a&gt;
          &lt;/header&gt;
          {Component &amp;&amp; &lt;Component /&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Footer.js   placed in FooterComp directory under src. </p>
  
  <pre><code>import React, { Component } from 'react';
  import '../App.css';
  
  class Footer extends Component {
      componentDidMount()
      {
          console.log('in componentDidMount of Footer')
      }
    render() {
        console.log('in render of Footer')
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Edited by Me&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Footer;
  </code></pre>
  
  <p>Why does this work when I refer my firstcomponent from my <code>index.js</code> but doesnt work for footer component when trying to import in my firstcomponent?</p>
  
  <p>Errormessage: <code>Error: Cannot find module '../FooterComp/Footer'</code></p>
  
  <p>Also note that if i place Footer component in the same directory as Firstcomponent and adjust the path it works fine</p>