Reactjs 在react中动态导入模块

我有一个基础react应用程序，它必须动态嵌入其他react应用程序。例如

App1（基本应用程序） -->附件2（子附件1） -->附件3（子附件2）

App2和App3是独立构建的react应用程序。 我需要一种将这些应用程序动态导入App1的方法。 我这样做的一种方法是，将构建的js和CSS文件添加到节点模块中各自的文件夹中（参考链接了解文件结构）

我正在尝试在App1中动态导入app2和app3

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}`);
    });
    

但这似乎找不到应用程序，并给出一个错误，即它无法在src文件夹外加载模块。

---

关于如何实现这一点有什么建议吗？

看看这个解决方案

在提取

App1

组件时，您可以看到

load

组件已呈现

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}</>;
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
函数加载（）{
回装；
}
导出默认函数App（）{
const[comp，setComp]=使用状态（加载）；
useffect（（）=>{
const load=async（）=>{
常量App1=（等待导入（“./App1”）。默认值；
setComp（App1）；
};
加载（）；
}, []);
返回{comp}；
}

这是否有效：？发布很好，我们可以将repo发布到存储库。但是，动态加载不起作用。我正在尝试在componentDidMount中动态加载组件。这里不允许引用src文件夹之外的任何内容。您不能引用src文件夹之外的任何内容的原因是因为这是create react app的特殊限制。它是在ModuleScopePlugin中实现的，以确保文件驻留在src文件夹中。是否有其他方法动态导入打包在节点模块中的模块？