> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# ModuleFederationIntegration

- Package: [@gooddata/sdk-ui-loaders](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-loaders/index.md)
- Kind: type-alias
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-loaders/src/dashboard/types.ts

Module federation interop data.

**Signature:**

```typescript
export type ModuleFederationIntegration = {
    __webpack_init_sharing__: (scope: string) => Promise<void>;
    __webpack_share_scopes__: any;
};
```

## Remarks

All of the values are added by webpack to the global scope if the Module Federation plugin is used in your app. See the following example of a webpack config for this to work:

## Example

```tsx
const { ModuleFederationPlugin } = require("webpack").container;

// add all the gooddata packages that absolutely need to be shared and singletons because of contexts
const gooddataSharePackagesEntries = Object.keys(deps)
  .filter((pkg) => pkg.startsWith("@gooddata"))
  .reduce((acc, curr) => {
    acc[curr] = { singleton: true };
    return acc;
  }, {});

module.exports = {
  // rest of your webpack config
  plugins: [
    // rest of your plugins
    new ModuleFederationPlugin({
      shared: {
        react: {
            import: "react",
            shareKey: "react",
            singleton: true,
        },
        "react-dom": {
            singleton: true,
        },
        // add all the packages that absolutely need to be shared and singletons because of contexts
        "react-intl": {
            singleton: true,
        },
        ...gooddataSharePackagesEntries,
      },
    }),
  ]
};
```