fix(runtime): set loading if registeredShared not set (#2943)

Author: 2heal1

.changeset/rude-trees-ring.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/runtime': patch
+---
+
+fix(runtime): set loading if registeredShared not set

packages/runtime/__tests__/shares.spec.ts

@@ -169,8 +169,8 @@ describe('shared', () => {
     const reactInstance2Res = reactInstance2();
     assert(reactInstance1Res, "reactInstance1 can't be undefined");
     assert(reactInstance2Res, "reactInstance2 can't be undefined");
-    expect(reactInstance1Res.uniqueId).toBe(2);
-    expect(reactInstance2Res.uniqueId).toBe(2);
+    expect(reactInstance1Res.uniqueId).toBe(1);
+    expect(reactInstance2Res.uniqueId).toBe(1);
     expect(reactInstance1Res).toStrictEqual(reactInstance2Res);
   });
 

packages/runtime/src/shared/index.ts

@@ -483,21 +483,24 @@ export class SharedHandler {
         this.shareScopeMap[sc][pkgName] = {};
       }
 
-      if (this.shareScopeMap[sc][pkgName][version]) {
+      if (!this.shareScopeMap[sc][pkgName][version]) {
+        this.shareScopeMap[sc][pkgName][version] = {
+          version,
+          scope: ['default'],
+          ...shareInfo,
+          lib,
+          loaded,
+          loading,
+        };
+        if (get) {
+          this.shareScopeMap[sc][pkgName][version].get = get;
+        }
         return;
       }
 
-      this.shareScopeMap[sc][pkgName][version] = {
-        version,
-        scope: ['default'],
-        ...shareInfo,
-        lib,
-        loaded,
-        loading,
-      };
-
-      if (get) {
-        this.shareScopeMap[sc][pkgName][version].get = get;
+      const registeredShared = this.shareScopeMap[sc][pkgName][version];
+      if (loading && !registeredShared.loading) {
+        registeredShared.loading = loading;
       }
     });
   }

packages/sdk/src/types/plugins/ModuleFederationPlugin.ts

@@ -82,6 +82,7 @@ export type ExternalsType =
   | 'promise'
   | 'import'
   | 'script'
+  | 'module-import'
   | 'node-commonjs';
 /**
  * Container locations and request scopes from which modules should be resolved and loaded at runtime. When provided, property name is used as request scope, otherwise request scope is automatically inferred from container location.

packages/storybook-addon/src/lib/storybook-addon.ts

@@ -57,6 +57,7 @@ export const webpack = async (
 
   if (moduleFederationConfig) {
     logger.info(`=> [MF] Push Module Federation plugin`);
+    // @ts-ignore enhanced add new remoteType 'module-import'
     plugins.push(new ModuleFederationPlugin(moduleFederationConfig));
   }