在反应中动态导入模块答案

【问题标题】：Dynamically import a module in react在反应中动态导入模块
【发布时间】：2020-07-18 11:54:54
【问题描述】：

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

App1（基础应用） --> App2（子app1） --> App3（子app2）

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 文件夹之外的模块的错误。关于如何实现这一点的任何建议？

【问题讨论】：

这行得通吗：stackoverflow.com/a/58931464/11380693 ?
发布没问题，我们可以将repo发布到存储库。但是，动态加载不起作用。我正在尝试动态加载我的componentDidMount中的组件。这里不允许引用 src 文件夹之外的任何内容
不能引用 src 文件夹外的任何东西的原因是因为它是 create-react-app 的特殊限制。它在 ModuleScopePlugin 中实现，以确保文件驻留在 src 文件夹中
有没有其他方法可以动态导入打包在node-modules中的模块？

标签： reactjs

【解决方案1】：

看看这个解决方案https://codesandbox.io/s/busy-elgamal-l6po2

您可以看到Loading 组件在获取App1 组件时被渲染。

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

【讨论】：