federated store example fails about module-federation-examples HOT 7 OPEN

// from example dynamic-remotes
function loadComponent(scope, module) {
  return async () => {
    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
    const Module = await loadRemote(`${scope}/${module.slice(2)}`);
    return Module;
  };
}

async loadRemote<T>(
  id: string,
  options?: { loadFactory?: boolean; from: 'build' | 'runtime' },
): Promise<T | null> {

  try {
    const { loadFactory = true } = options || { loadFactory: true };

    // 1. Validate the parameters of the retrieved module. There are two module request methods: pkgName + expose and alias + expose.
    // 2. Request the snapshot information of the current host and globally store the obtained snapshot information. The retrieved module information is partially offline and partially online. The online module information will retrieve the modules used online.
    // 3. Retrieve the detailed information of the current module from global (remoteEntry address, expose resource address)
    // 4. After retrieving remoteEntry, call the init of the module, and then retrieve the exported content of the module through get
    // id: pkgName(@federation/app1) + expose(button) = @federation/app1/button
    // id: alias(app1) + expose(button) = app1/button
    // id: alias(app1/utils) + expose(loadash/sort) = app1/utils/loadash/sort

    const { module, moduleOptions, remoteMatchInfo } =
      await this._getRemoteModuleAndOptions(id);
        
    const { pkgNameOrAlias, remote, expose, id: idRes } = remoteMatchInfo;
    const moduleOrFactory = (await module.get(expose, options)) as T;

    await this.hooks.lifecycle.onLoad.emit({
      id: idRes,
      pkgNameOrAlias,
      expose,
      exposeModule: loadFactory ? moduleOrFactory : undefined,
      exposeModuleFactory: loadFactory ? undefined : moduleOrFactory,
      remote,
      options: moduleOptions,
      moduleInstance: module,
      origin: this,
    });

    return moduleOrFactory;

  } catch (error) {
  
    const { from = 'runtime' } = options || { from: 'runtime' };
    const failOver = await this.hooks.lifecycle.errorLoadRemote.emit({
      id,
      error,
      from,
      origin: this,
    });

    if (!failOver) {
      throw error;
    }

    return failOver as T;
  }
}

//  ./core/src/api/api.ts
16 export async function loadAndInitializeRemote(
17   remoteOptions: RemoteOptions,
18 ): Promise<RemoteContainer> {
19   const globalScope = getScope();
20   const containerKey = getContainerKey(remoteOptions);
21 
22   // TODO: Make this generic, possibly the runtime?
23   const asyncContainer = loadScript(containerKey, remoteOptions);
24 
25   if (!asyncContainer) {
26     throw new Error('Unable to load remote container');
27   }
28 
29   // TODO: look at init tokens, pass to getSharingScope
30 
31   if (!globalScope.__sharing_scope__) {
32     // TODO: Make this generic, possibly the runtime?
33     globalScope.__sharing_scope__ = await initializeSharingScope();
34   }
35 
36   return initContainer(asyncContainer, globalScope.__sharing_scope__);
37 }


// ./core/src/integrations/webpack/factory.ts
5 export async function initializeSharingScope(
6   scopeName = 'default',
7 ): Promise<SharedScope> {
8   const webpackShareScopes = __webpack_share_scopes__ as unknown as SharedScope;
9 
10   if (!webpackShareScopes?.default) {
11     await __webpack_init_sharing__(scopeName);
12   }
13 
14   // TODO: Why would we reference __webpack_require and not __webpack_share_scopes__ ?
15   return (__webpack_require__ as unknown as WebpackRequire)
16     .S as unknown as SharedScope;
17 }

// remote2/config/module-federation.js
...
    exposes: {
      './App': './src/bootstrap',
    },
...    

// remote1/src/App.js
...
const RemoteApp = React.lazy(
  () => import('remote2/App') as Promise<{ default: React.FC<{ store: AppStore }> }>,
);
...

// from example dynamic-remotes
function loadComponent(scope, module) {
  return async () => {
    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
    const Module = await loadRemote(`${scope}/${module.slice(2)}`);
    return Module;
  };
}