title: Dynamic import components error - Uncaught (in promise) Error: Cannot find module
body: <p>I made a react library converting menu data returned by microservice to dynamic route. <br/></p>
  
  <p>project structure image is below: <br/>
  --react-app <br/>
  ----node_modules <br/>
  ------ ... <br/>
  ------ rb-react   --->  my react library <br/>
  ------ ... <br/>
  ----src <br/>
  ------pages <br/>
  --------Dashboard.js <br/>
  --------Prod.js <br/>
  --------User.js <br/>
  -------- ... <br/></p>
  
  <p>library rb-react can not import pages, ie Dashboard.js  <br/></p>
  
  <pre><code>        let rootPath = path.resolve(__dirname, '../src/pages');
  
          let menuPath = menuCommand.replace('#', '');
          let importObject = asyncComponent(() =&gt;
            import(rootPath + '/' + menuCommand.split('/')[1])
          );
          if (isEmpty(routeResultArray)) {
  
            routeResultArray.push(
              &lt;Route key={menuKey} exact path='/' component={importObject} /&gt;
            );
          }
  </code></pre>
  
  <p>node --version <br/>
  v12.6.0 <br/>
  npm --version <br/>
  6.11.3 <br/></p>
  
  <p>Here is some code of my project</p>
  
  <p>dynamic import class</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function asyncComponent(importComponent) {
  
    class RbImport extends Component {
  
      constructor(props) {
  
        super(props);
  
        this.state = {
          component: null
        };
      }
  
      async componentDidMount() {
  
        const { default: component } = await importComponent();
  
        this.setState({
  
          component: component
        });
      }
  
      render() {
  
        const C = this.state.component;
  
        return C ? &lt;C {...this.props} /&gt; : &lt;&gt;&lt;/&gt;;
      }
    }
  
    return RbImport;
  }
  </code></pre>
  
  <p>dynamic route</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import path from 'path';
  import { HashRouter, Route, Switch } from 'react-router-dom';
  import ScrollToTop from './ScrollToTop';
  import App from '../../App';
  import { RbLibraryComponent } from './RbLibraryComponent';
  import { RbLocalStorage } from '../util/RbLocalStorage';
  import { NotFound } from '../notfound/NotFound';
  import { isEmpty } from '../util/RbUtil';
  import asyncComponent from '../util/RbImport';
  
  export class RbRoute extends RbLibraryComponent {
  
    constructor() {
      super();
      this.state = {};
  
      this.RbLocalStorage = new RbLocalStorage();
      this.composeRoute = this.composeRoute.bind(this);
      this.recursiveComposeRoute = this.recursiveComposeRoute.bind(this);
    }
  
    composeRoute() {
  
      let routeResultArray = [];
      let userMenus = this.RbLocalStorage.loadUserMenu();
  
      this.recursiveComposeRoute(routeResultArray, userMenus, null);
      return routeResultArray;
    }
  
    recursiveComposeRoute(routeResultArray, menuDataList, prefixKey) {
  
      if (isEmpty(menuDataList)) {
  
        return;
      }
  
      prefixKey = isEmpty(prefixKey) ? '' : prefixKey;
  
      let userMenuCount = menuDataList.items.length;
      for (let idx = 0; idx &lt; userMenuCount; idx++) {
  
        let userMenu = menuDataList.items[idx];
  
        if (isEmpty(userMenu)) {
  
          continue;
        }
  
        let menuKey = isEmpty(prefixKey) ? idx : prefixKey + '-' + idx;
  
        let menuCommand = userMenu.command;
        if (isEmpty(menuCommand)) {
          //nothing
        } else {
  
          let rootPath = path.resolve(__dirname, '../src/pages');
  
          let menuPath = menuCommand.replace('#', '');
          let importObject = asyncComponent(() =&gt;
            import(rootPath + '/' + menuCommand.split('/')[1])
          );
          if (isEmpty(routeResultArray)) {
  
            routeResultArray.push(
              &lt;Route key={menuKey} exact path='/' component={importObject} /&gt;
            );
          }
  
          routeResultArray.push(
            &lt;Route key={menuKey} path={menuPath} component={importObject} /&gt;
          );
        }
  
        if (isEmpty(userMenu.items)) {
          //nothing
        } else {
  
          this.recursiveComposeRoute(routeResultArray, userMenu, menuKey);
        }
      }
    }
  
    render() {
  
      let { menu, productionName, userName } = this.props;
  
      if (menu === null || menu === undefined) {
        return &lt;&gt;&lt;/&gt;;
      }
  
      return (
        &lt;HashRouter&gt;
          &lt;ScrollToTop&gt;
            &lt;App menu={menu} userName={userName}&gt;
              &lt;Switch&gt;
                {this.composeRoute()}
                &lt;Route component={NotFound} /&gt;
              &lt;/Switch&gt;
            &lt;/App&gt;
          &lt;/ScrollToTop&gt;
        &lt;/HashRouter&gt;
      );
    }
  }
  
  export default RbRoute;
  </code></pre>
  
  <p>Exception Message at Chrome Console</p>
  
  <pre><code>Uncaught (in promise) Error: Cannot find module '/src/pages/Dashboard'
      at webpackContextResolve (^.*$:29)
      at webpackContext (^.*$:24)
      at RbRoute.js:221 --&gt; (Compiled Source) return _interopRequireWildcard(require("".concat(rootPath + '/' + menuCommand.split('/')[1])));
  
  </code></pre>