如何使用 single-spa 动态加载微应用

Question

我正在尝试构建一个React Root应用程序，该应用程序根据记录的用户角色动态加载微型应用程序。

我的root应用程序是使用Create-React-app创建的。

index.tsx就是这样，

import reportWebVitals from './reportWebVitals';
import { registerApplication, start } from 'single-spa';
registerApplication(
    'root',
    () => import('./root.app.js'),
    () => true,
);
start();
reportWebVitals();

我正在使用oidc-react来管理身份验证，并且我正在以这种方式使用它：

import { AuthProvider } from 'oidc-react';
const oidcConfig = {....}
function App() {
  return (
      <AuthProvider {...oidcConfig} >
          <Layout />
      </AuthProvider>
  );
}

布局组件类似于：

const Layout = () => {
   useEffect(()=>{
        registerDynamicApplication("http://localhost:8500/mf-video.js", "mf-container");
    }, []);

   return (
      <>
         <div id="mf-container">

         </div>
      </>
   )
};

where regission> registerdynamicapplication is：

export const registerDynamicApplication = (url, id, customProps = {}) => {
    let parcel = null;
    if (document.getElementById(id)) {
        parcel = mountRootParcel(() => import(url), {
            domElement: document.getElementById(id),
            ...customProps
        });
    }
    return parcel;
}

in 使用效果将出示基于用户角色获取应用程序的API调用。

当我尝试以这种方式加载微型应用时，我会收到错误：

Uncaught (in promise) Error: Cannot find module 'http://localhost:8500/mf-video.js'
    at utils|lazy|groupOptions: {}|namespace object:5:1

已使用CLI命令创建了微型应用程序：

create-single-spa --moduleType app-parcel --framework react

无需触摸任何内容。

当我尝试访问http：// localhost：8500/mf-video.js时，我触及的是获取内容：

您是否知道为什么MF的首次负载不起作用？

谢谢你！