title: Dynamically import a module in react
body: <p>I have a base react application which has to embed other react applications dynamically. For eg</p>
  <p>App1 (Base app)
  --&gt; App2 (child app1)
  --&gt; App3 (child app2)</p>
  <p>App2 and App3 are independently built react applications.
  I need a way to dynamically importing these apps into App1.
  One way I did was, added the built js and CSS files into respective folders in node-modules(refer to the link for file structure)</p>
  <p><a href="https://i.stack.imgur.com/8KzSo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8KzSo.png" alt="enter image description here" /></a></p>
  <p>I am trying to import the app2 and app3 dynamically in App1,</p>
  <pre><code>let path = `../../node-modules/${application.title}/build/${application.title}`
      let pathCss = `../../node-modules/${application.title}/build/${application.title}.css`
      import('' + pathCss)
      .then(component =&gt;
      console.log('css file loaded', component)
      ).catch(error =&gt; {
      console.error(`&quot;${application.title}&quot; not yet supported ${error}`);
      });
          
      import('' + path)
      .then(component =&gt;
      this.setState({
      routeComponents: this.state.routeComponents.concat(component.App)
      })
      )
      .catch(error =&gt; {
          console.error(`&quot;${application.title}&quot; not yet supported ${error}`);
      });
      
  </code></pre>
  <p>but this does not seem to find the applications and gives the error that it cannot load modules outside the src folder.
  Any suggestions on how this can be achieved?</p>