Dynamically import a module in react

Question

I have a base react application which has to embed other react applications dynamically. For eg

App1 (Base app) --> App2 (child app1) --> App3 (child app2)

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)

I am trying to import the app2 and app3 dynamically in App1,

let path = `../../node-modules/${application.title}/build/${application.title}`
    let pathCss = `../../node-modules/${application.title}/build/${application.title}.css`
    import('' + pathCss)
    .then(component =>
    console.log('css file loaded', component)
    ).catch(error => {
    console.error(`"${application.title}" not yet supported ${error}`);
    });
        
    import('' + path)
    .then(component =>
    this.setState({
    routeComponents: this.state.routeComponents.concat(component.App)
    })
    )
    .catch(error => {
        console.error(`"${application.title}" not yet supported ${error}`);
    });
    

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?

Answer 1

take a look at this solution https://codesandbox.io/s/busy-elgamal-l6po2

You can see the Loading component been rendered while the App1 component is being fetched.

import React, { useState, useEffect } from "react";
import "./styles.css";

function Loading() {
  return <div>Loading</div>;
}

export default function App() {
  const [comp, setComp] = useState(Loading);

  useEffect(() => {
    const load = async () => {
      const App1 = (await import("./App1")).default;
      setComp(App1);
    };

    load();
  }, []);

  return <>{comp}</>;
}