• English

      • Global variables

      In Module Federation, the main global variables are __FEDERATION__, __SHARE__ and __INSTANCES__. They record the module federation info, shared module info, and instance info of the current application, and help us understand and debug the runtime behavior of module federation.

      Note

      Global variables are read-only — do not modify them.

      FEDERATION

      After initialization, the __FEDERATION__ variable will be injected globally. This variable is an object that contains all the module federation information of the current application.

      moduleInfo

      Tip

      It is recommended to use chrome devtools to view the processed moduleInfo.

      Record all module information of the current application. Based on this information, you can get the module's dependencies.

      The moduleInfo structure is an object whose key consists of two parts: {moduleName}(:{moduleVersion}).

      • moduleName is the name of the module, and moduleVersion is the version of the module or its url.

      • moduleVersion only exists for producer modules.

      The following example shows how to use moduleInfo to get dependencies, assuming the following moduleInfo:

        moduleInfo
      moduleInfo: {
  "manifest_host": {
    "version": "",
    "remoteEntry": "",
    "remotesInfo": {
      "webpack_provider": {
        "matchedVersion": "http://localhost:3009/mf-manifest.json"
      },
      "rspack_manifest_provider": {
        "matchedVersion": "http://localhost:3011/mf-manifest.json"
      },
      "app1": {
        "matchedVersion": "http://127.0.0.1:4001/mf-manifest.json"
      },
      "rspack_provider": {
        "matchedVersion": "http://localhost:3010/mf-manifest.json"
      }
    }
  },
  "rspack_manifest_provider:http://localhost:3011/mf-manifest.json": {
    "version": "http://localhost:3011/mf-manifest.json",
    "buildVersion": "0.0.0",
    "globalName": "rspack_manifest_provider",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js-_9b5b0.js",
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js-_9b5b1.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react_18_3_1_node_modules_react_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react",
        "version": "18.3.1"
      }
    ],
    "modules": [
      {
        "moduleName": "Component",
        "modulePath": "./Component",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_Component.js"
            ],
            "async": [
              "src_asyncFile_ts.js"
            ]
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      }
    ],
    "publicPath": "http://localhost:3011/"
  },
  "webpack_provider:http://localhost:3009/mf-manifest.json": {
    "version": "http://localhost:3009/mf-manifest.json",
    "buildVersion": "0.0.0",
    "globalName": "webpack_provider",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react_18_3_1_node_modules_react_jsx-dev-runtime_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react/jsx-dev-runtime",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react_18_3_1_node_modules_react_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react",
        "version": "18.3.1"
      }
    ],
    "modules": [
      {
        "moduleName": "useCustomRemoteHook",
        "modulePath": "./useCustomRemoteHook",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_useCustomRemoteHook.js"
            ],
            "async": []
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      },
      {
        "moduleName": "WebpackSvg",
        "modulePath": "./WebpackSvg",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_WebpackSvg.js"
            ],
            "async": []
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      },
      {
        "moduleName": "WebpackPng",
        "modulePath": "./WebpackPng",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_WebpackPng.js"
            ],
            "async": []
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      }
    ],
    "publicPath": "http://localhost:3009/"
  },
  "app1:http://127.0.0.1:4001/mf-manifest.json": {
    "version": "http://127.0.0.1:4001/mf-manifest.json",
    "buildVersion": "0.1.94",
    "globalName": "app1",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "static/js/lib-react.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "static/js/lib-react.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "static/js/lib-react.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react/jsx-dev-runtime",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "static/js/lib-react.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react/jsx-runtime",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "static/js/lib-react.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react",
        "version": "18.3.1"
      }
    ],
    "modules": [
      {
        "moduleName": "thing",
        "modulePath": "./thing",
        "assets": {
          "js": {
            "sync": [
              "static/js/async/__federation_expose_thing.js"
            ],
            "async": []
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      },
      {
        "moduleName": "react-component",
        "modulePath": "./react-component",
        "assets": {
          "js": {
            "sync": [
              "static/js/lib-router.js",
              "static/js/async/vendors-node_modules_pnpm_babel_runtime_7_26_0_node_modules_babel_runtime_helpers_asyncToGene-ca0e7f.js",
              "static/js/async/src_components_react-component_tsx.js",
              "static/js/async/__federation_expose_react_component.js"
            ],
            "async": []
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      }
    ],
    "publicPath": "http://127.0.0.1:4001/"
  },
  "rspack_provider:http://localhost:3010/mf-manifest.json": {
    "version": "http://localhost:3010/mf-manifest.json",
    "buildVersion": "0.0.0",
    "globalName": "rspack_provider",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react_18_3_1_node_modules_react_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react",
        "version": "18.3.1"
      }
    ],
    "modules": [
      {
        "moduleName": "ButtonOldAnt",
        "modulePath": "./ButtonOldAnt",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_ButtonOldAnt.js"
            ],
            "async": []
          },
          "css": {
            "sync": [
              "__federation_expose_ButtonOldAnt.css"
            ],
            "async": []
          }
        }
      }
    ],
    "publicPath": "http://localhost:3010/"
  }
}

      In the above example, moduleInfo contains information about 5 modules, among which manifest_host does not have a version number after it, indicating that it is a consumer module.

      The remotesInfo field in manifest_host records the information of all producer modules it depends on, and the corresponding matchedVersion field records the version or url it matches.

      The corresponding producer module information can be obtained through the key + matchedVersion in the consumer remotesInfo field, such as webpack_provider:http://localhost:3009/mf-manifest.json.

      version

      Only exists in producers, the value of consumers is an empty string

      The version or url of the current module.

      buildVersion

      The build version of the current module, usually taken from the version field in package.json.

      globalName

      Only exists in the producer

      The global variable name of the current producer module. You can get the producer's container through globalThis[globalName], which is usually taken from the name field in package.json.

      publicPath

      The publicPath of the current module.

      getPublicPath

      This field and publicPath are mutually exclusive

      The getPublicPath of the current module, get the final publicPath through new Function(getPublicPath)() call.

      ssrPublicPath

      The publicPath of the server file of the current module.

      remoteEntry

      Only exists in the producer

      The name of the entry file of the current producer module.

      remoteEntryType

      Only exists in the producer

      The entry file type of the current producer module.

      remoteTypesZip

      Only exists in the producer

      The name of the compressed package of the type declaration file of the current producer module.

      remoteTypesAPI

      Only exists in the producer

      The name of the type API declaration file of the current producer module.

      shared

      All shared module information that the current module depends on. The type definition is as follows:

      type Shared = Array<{
  sharedName: string;
  version?: string;
  assets:  {
    js: {
      sync: string[];
      async: string[];
    };
    css: {
      sync: string[];
      async: string[];
    };
  };
}>;

      modules

      Only exists in the producer

      All module information exported by the current module. The type definition is as follows:

      type Modules = Array<{
  moduleName: string;
  modulePath: string;
  assets:  {
    js: {
      sync: string[];
      async: string[];
    };
    css: {
      sync: string[];
      async: string[];
    };
  };
}>;

      SHARE

      All shared module information currently registered (loaded), the type definition is as follows:

        Type declaration
      type GlobalShareScopeMap = {
  [instanceName: string]: {
    [scope: string]: {
      [pkgName: string]: {
        [sharedVersion: string]: {
          version: string;
          get:  (() => () => Module) | (() => Promise<() => Module>);
          shareConfig: {
            singleton?: boolean;
            requiredVersion: false | string;
            eager?: boolean;
            strictVersion?: boolean;
            layer?: string | null;
          }
          scope: Array<string>;
          useIn: Array<string>;
          from: string;
          deps: Array<string>;
          lib?: () => Module;
          loaded?: boolean;
          loading?: null | Promise<any>;
          // compatibility with previous shared
          eager?: boolean;
          /**
           * @deprecated set in initOptions.shareStrategy instead
           */
          strategy: 'version-first' | 'loaded-first';
        }
      };
    };
  };
};

      We can use __SHARE__ to query the loading status of a specific shared. For example, if the following __SHARE__ exists:

        __SHARE__
      "__SHARE__": {
  "manifest_host:0.0.0": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  },
  "app1:0.1.94": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  }
}

      In the data above, you can see the shared module information for the two modules manifest_host and app1. For example, to inspect how the react module was loaded, follow these steps:

      1. react has only one version, 18.3.1.
      2. Check __SHARE__["app1:0.1.94"].default.react["18.3.1"] — loaded is true, indicating the module has been loaded.
      3. The from field is webpack_provider, meaning the react module was provided by that module.
      4. Finally, look at the useIn field: it contains webpack_provider and app1, meaning this version of react is consumed by both modules.

      INSTANCES

      The currently loaded MF instance. It stores a list of all loaded MF modules. Every list entry has the following structure:

      bridgeHook

      Contains metadata about the MF bridge which is used to enable cross-application use-cases (React, Vue) to load properly.

      hooks

      Contains metadata about the MF hooks which are used to tap into the MF lifecycle.

      loaderHook

      Contains metadata about the MF loaderHook.

      moduleCache

      Contains a Map storing all MF modules with their metadata available in the moduleCache.

      name

      The name of the MF module.

      options

      Useful for debugging your modules.

      Vital data about the MF module, such as loaded plugins, connected remotes, shareStrategy and the shared dependency object.

      remoteHandler

      Contains metadata about the MF remoteHandler including the idToRemoteMap which stores all bindings to connected remote components exposed by the connected MF remotes.

      shareScopeMap

      Contains metadata about the MF shared scope including data about every connected shared dependency.

      sharedHandler

      Contains metadata about the MF sharedHandler.

      snapshotHandler

      Useful to check the mf-manifest.json structure and status.

      Contains metadata about the MF snapshotHandler including the manifestCache object and the manifestLoading object.

      version

      The version of the Mf module.

      PRELOADED_MAP

      The key-value-map of all preloaded modules (build-time). key represents the module name, and value represents the boolean value of the loaded status.

      MANIFEST_LOADING

      Contains metadata about the manifestLoading object. This is the same as the snapshotHandler.manifestLoading in __INSTANCES__.