{"id":45980540,"url":"https://github.com/cloudbeds/webpack-module-federation-types-plugin","last_synced_at":"2026-02-28T17:34:05.594Z","repository":{"id":138926958,"uuid":"515537885","full_name":"cloudbeds/webpack-module-federation-types-plugin","owner":"cloudbeds","description":"A webpack/rspack plugin and a node-based CLI tool that facilitates the sharing of Typescript definition files across microapps","archived":false,"fork":false,"pushed_at":"2025-11-30T17:50:08.000Z","size":977,"stargazers_count":25,"open_issues_count":2,"forks_count":7,"subscribers_count":16,"default_branch":"main","last_synced_at":"2026-01-14T20:27:58.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudbeds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-07-19T10:28:10.000Z","updated_at":"2025-11-30T17:50:12.000Z","dependencies_parsed_at":"2023-09-29T13:55:31.144Z","dependency_job_id":"555b3b27-7568-4790-a24c-8c75168cedb9","html_url":"https://github.com/cloudbeds/webpack-module-federation-types-plugin","commit_stats":null,"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"purl":"pkg:github/cloudbeds/webpack-module-federation-types-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbeds%2Fwebpack-module-federation-types-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbeds%2Fwebpack-module-federation-types-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbeds%2Fwebpack-module-federation-types-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbeds%2Fwebpack-module-federation-types-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudbeds","download_url":"https://codeload.github.com/cloudbeds/webpack-module-federation-types-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbeds%2Fwebpack-module-federation-types-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29944768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T13:49:17.081Z","status":"ssl_error","status_checked_at":"2026-02-28T13:48:50.396Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-28T17:34:05.038Z","updated_at":"2026-02-28T17:34:05.572Z","avatar_url":"https://github.com/cloudbeds.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# module-federation-types-plugin\n\nThis package exposes a Webpack plugin and a node CLI command `make-federated-types`.\n\nIt compiles types into a _dist/@types/index.d.ts_ file and downloads\ncompiled remote types from other federated microapps into _src/@types/remotes_ folder.\n\nGlobal type definitions from _src/@types/*.d.ts_ are included in compilation.\n\nAll paths can be customized to meet your environment.\n\n## Installation\n\nThis package is published to GitHub Packages. To install it, you need to configure npm to use GitHub Packages registry for the `@cloudbeds` scope.\n\n### Configure npm for GitHub Packages\n\n**Option 1: Using `.npmrc` file**\n\nCreate or update your `.npmrc` file in your project root or home directory:\n\n```sh\n@cloudbeds:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}\n```\n\nReplace `${GITHUB_TOKEN}` with your GitHub personal access token that has `read:packages` permission, or set it as an environment variable.\n\n**Option 2: Using npm config commands**\n\n```sh\nnpm config set @cloudbeds:registry https://npm.pkg.github.com\nnpm config set //npm.pkg.github.com/:_authToken YOUR_GITHUB_TOKEN\n```\n\nReplace `YOUR_GITHUB_TOKEN` with your GitHub personal access token that has `read:packages` permission.\n\n**Option 3: Using GitHub CLI**\n\nIf you have the [GitHub CLI](https://cli.github.com/) installed and authenticated with a Personal Access Token, you can automatically configure npm:\n\n```sh\nnpm config set @cloudbeds:registry https://npm.pkg.github.com\nnpm config set //npm.pkg.github.com/:_authToken $(gh auth token)\n```\n\n**Note:** This only works reliably if you authenticated GitHub CLI with a PAT (using `gh auth login --with-token`). If you used OAuth web flow, the token may expire and you'll need to reconfigure npm.\n\n### Install the package\n\n```sh\nnpm i @cloudbeds/webpack-module-federation-types-plugin\n```\n\n## CLI Tool\n\nThe standalone `make-federated-types` script compiles types to the _dist/@types_ folder, the same way as the plugin does.\nIt is useful for testing and debugging purposes or when it is not desired to update types automatically during the build process.\n\nThis script should not be used in CI as the `build` script, that executes the plugin, already writes the types.\n\nThe main requirement for the tool is the existance of a `federation.config.json` file.\n\nIt can be called like so:\n\n```sh\nnpx make-federated-types\n```\n\nOr it can be added to `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"make-types\": \"make-federated-types\"\n  }\n}\n```\n\n### CLI options\n\n#### download-federated-types\n| Option                        | Default value       | Description                 |\n|-------------------------------|---------------------|-----------------------------|\n| `--webpack-config`            | `webpack.config.js` | Path to webpack config file |\n\nIf the config is written in TypeScript, the script should be called with `ts-node`. _Example:_\n\n```\nts-node node_modules/bin/download-federated-types --webpack-config webpack/prod.ts\n```\n\n#### make-federated-types\n| Option                        | Default value       | Description                                                                    |\n|-------------------------------|---------------------|--------------------------------------------------------------------------------|\n| `--output-types-folder`, `-o` | `dist/@types`       | Path to the output folder, absolute or relative to the working directory       |\n| `--global-types`, `-g`        | `src/@types`        | Path to project's global ambient type definitions, relative to the working dir |\n| `--federation-config`, `-c`   | `src/@types`        | Path to federation.config, relative to the working dir                         |\n| `--tsconfig`, `-t`            | `src/@types`        | Path to tsconfig.json, relative to the working dir                             |\n| `--webpack-config`            | `webpack.config.js` | Path to webpack.config.js                                                      |\n\n## Plugin Configuration\n\n### Exposed modules\n\nCreate a `federation.config.json` that will contain the remote name and exported members.\nThis file is mandatory for the standalone script but not required for the plugin.\n\nProperties of this object can be used in Webpack's `ModuleFederationPlugin`\nconfiguration object and required by the standalone script. Example:\n\n### `federation.config.json`\n\nRequirements:\n\n- all paths must be relative to the project root\n- the `/index` file name suffix is mandatory (without file extension)\n\n```json\n{\n  \"name\": \"microapp-42\",\n  \"exposes\": {\n    \"./Button\": \"./src/view-layer/components/Button\",\n    \"./Portal\": \"./src/view-layer/index\",\n    \"./Http\": \"./src/wmf-expose/Http\"\n  }\n}\n```\n\n### `webpack.config.js`\n\nSpread these properties into your `ModuleFederationPlugin` configuration and add `ModuleFederationTypesPlugin` to every\nmicroapp, like so:\n\n```js\nimport webpack from 'webpack';\nimport { ModuleFederationTypesPlugin } from '@cloudbeds/webpack-module-federation-types-plugin';\n\nimport federationConfig from '../federation.config.json';\n\nconst { ModuleFederationPlugin } = webpack.container;\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    new ModuleFederationPlugin({\n      ...federationConfig,\n      filename: 'remoteEntry.js',\n      shared: {\n        ...require('./package.json').dependencies,\n      },\n    }),\n    new ModuleFederationTypesPlugin({\n      downloadTypesWhenIdleIntervalInSeconds: 120,\n    }),\n  ],\n}\n```\n\nTo enable verbose logging add folowing in webpack config:\n\n```js\n  infrastructureLogging: {\n    level: 'log'\n  }\n```\n\n### Plugin Options\n\n|                                  Setting |        Value         |         Default          | Description                                                                                                                                                                                                                                                                                                                              |\n|-----------------------------------------:|:--------------------:|:------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n|                        `dirEmittedTypes` |       `string`       |         `@types`         | Path to the output folder for emitted types, relative to the distribution folder                                                                                                                                                                                                                                                         |\n|                         `dirGlobalTypes` |       `string`       |       `src/@types`       | Path to project's global ambient type definitions, relative to the working dir                                                                                                                                                                                                                                                           |\n|                     `dirDownloadedTypes` |       `string`       |   `src/@types/remotes`   | Path to the output folder for downloaded types                                                                                                                                                                                                                                                                                           |\n|                 `disableTypeCompilation` |      `boolean`       |         `false`          | Disable compilation of types                                                                                                                                                                                                                                                                                                             |\n|           `disableDownladingRemoteTypes` |      `boolean`       |         `false`          | Disable downloading of remote types                                                                                                                                                                                                                                                                                                      |\n| `downloadTypesWhenIdleIntervalInSeconds` |    `number`, `-1`    |           `60`           | Synchronize types continusouly - compile types after every compilation, download when idle with a specified delay value in seconds. \u003cbr\u003e\u003cbr\u003e `-1` - disables continuous synchronization (compile and download will happen only on startup).                                                                                              |\n|                        `remoteEntryUrls` |  `RemoteEntryUrls`   |           `{}`           | Base URLs for types. These should target compiled bundles that also contain the types. E.g. with `{ mfeApp: 'https://assets.mydomain.com/mfe-app' }` the types will be downloaded from `'https://assets.mydomain.com/mfe-app/@types/index.d.ts'`. More details available in [this section](#templated-remote-urls)                       |\n|                     `remoteManifestUrls` | `RemoteManifestUrls` |           `{}`           | URLs to remote manifest files. A manifest contains a URL to a remote entry that is substituted in runtime.  \u003cbr\u003e\u003cbr\u003e More details available in [this section](#templated-remote-urls)                                                                                                                                                    |\n|             `moduleFederationPluginName` |       `string`       | `ModuleFederationPlugin` | The name of the Module Federation plugin. Change this to `NextFederationPlugin` if you are using this plugin with [@module-federation/nextjs-mf](https://www.npmjs.com/package/@module-federation/nextjs-mf)                                                                                                                             |\n\n\n## Consuming remote types\n\nWhen you build your microapp, the plugin will download typings to _src/@types/remotes_ folder\n\nModules that are not intended to be imported are prefixed with `#not-for-import/`.\nThese are the modules that were imported in compiled exposed modules but not listed in `exposes` section.\nTo remain swift and unobtrusive, compiled types are not processed with an AST visitor like esprima.\nThat said PRs are welcome if someone sees a better solution.\n\n## Templated Remote URLs\n\nTemplated URLs are URLs to the external remotes that are substituted in runtime using a syntax that is used in\n[module-federation/external-remotes-plugin](https://github.com/module-federation/external-remotes-plugin)\n\n_Example:_ for a `mfeApp` remote entry:\n\n```js\n{ mfeApp: 'mfeApp@[mfeAppUrl]/remoteEntry.js' }\n```\n\nThe `[mfeAppUrl]` placeholder refers to `window.mfeAppUrl` in runtime.\nThere are several ways one can resolve this placeholder:\n\n  * `remoteEntryUrls` option\n  * `remoteManifestUrls` or `remoteManifestUrl` option\n\nThe `remoteEntryUrls` option is a simple key-value map of remote names and their bundle's base URL.\n\n### Remote Manifest files\n\nManifest files, when provided, are fetched every time the types are downloded.\n\nExample of a configuration:\n\n```js\nnew ModuleFederationTypesPlugin({\n  remoteManifestUrls: {\n    mfeApp1: 'http://localhost:4480/remotes/dev/mfe-app-1-remote-entry.json',\n    mfeApp2: 'http://localhost:4480/remotes/dev/mfe-app-2-remote-entry.json',\n    registry: 'http://localhost:4480/remotes/dev/remote-entries.json',\n  }\n})\n```\n\nExample with a single manifest file:\n\n```js\nnew ModuleFederationTypesPlugin({\n  remoteManifestUrl: 'http://localhost:4480/remotes/dev/remote-entries.json',\n})\n```\n\nIt's expected that a JSON will contain an object with a `url` property:\n\n```json\n{\n  \"url\": \"https://assets.mydomain.com/mfe-app/remoteEntry.js\"\n}\n```\n\nFor the `registry` field in `remoteManifestUrls` or for the single `remoteManifestUrl` option,\nmultiple remote entry URLs can be substituted in a single JSON file.\nDepending on your architecture, this could be the only URL that you need to specify.\nExample of a `remote-entries.json` file for a Prod environment:\n\n\n```json\n[\n  {\n    \"scope\": \"mfeApp1\",\n    \"url\": \"https://assets.mydomain.com/mfe-app-1/remoteEntry.js\"\n  },\n  {\n    \"scope\": \"mfeApp2\",\n    \"url\": \"https://assets.mydomain.com/mfe-app-2/remoteEntry.js\"\n  },\n  {\n    \"scope\": \"mfeApp3\",\n    \"url\": \"https://assets.mydomain.com/mfe-app-3/remoteEntry.js\"\n  }\n]\n```\n\nAn alternative format for the manifest is an object:\n\n```json\n{\n  \"mfe-app-1\": \"https://assets.mydomain.com/mfe-app-1/remoteEntry.js\",\n  \"mfe-app-2\": \"https://assets.mydomain.com/mfe-app-2/remoteEntry.js\",\n  \"mfe-app-3\": \"https://assets.mydomain.com/mfe-app-3/remoteEntry.js\"\n}\n```\n\nNote that in this case the key is converted to kebabCase and used as a scope name.\n\nYou can have registries with URLs that target bundles that was built for specific deployment environment.\n\nThe origin of the microapp's URL is used as the base URL for downloaded types\n\nExample: `https://assets.mydomain.com/mfe-app-1/@types/index.d.ts`\n\n### Importing from self as from remote\n\nIt is also possible to add self as a remote entry to allow importing from self like from a remote.\nExample for an `mfeApp` microapp:\n\n```js\nremotes: {\n  mfeApp: 'mfeApp@[mfeAppUrl]/remoteEntry.js'\n}\n```\n\n### CI/CD\n\nIt is suggested to download types in a CI workflow only when a dev branch is merged\nto the `main` branch, that is the time when the deployment to dev/stage/prod is about to happen.\nIn this case the downloaded types will correspond to the latest versions of dependent microapps,\nresulting in valid static type checking against other microapps code in their `main` branch.\n\nWhen `DEPLOYMENT_ENV` env variable is set to `devbox`, remote types are not downloaded.\nThat is to allow a microapp to download types from dev branch of another microapp.\nOtherwise, the build would fail on static type checking phase.\nA dev branch of a microapp may depend on another dev branch of another microapp,\nthus will have to commit those types to avoid failing workflows.\n\n## History\n\nHaving Webpack 5 module federation architecture in place it's tedious to manually create/maintain\nambient type definitions for your packages so TypeScript can resolve the dynamic imports to their proper types.\n\nWhile using `@ts-ignore` on your imports works, it is a bummer to lose intellisense and type-checking capabilities.\n\nInspired by several existing solutions:\n\n- [@touk/federated-types](https://github.com/touk/federated-types)\n  a fork of [pixability/federated-types](https://github.com/pixability/federated-types)\n- [ruanyl/dts-loader](https://github.com/ruanyl/dts-loader)\n- [ruanyl/webpack-remote-types-plugin](https://github.com/ruanyl/webpack-remote-types-plugin), a wmf remotes-aware\n  downloader\n  of typings that can be used also with files emitted using `@touk/federated-types`\n  . [Example](https://github.com/jrandeniya/federated-types-sample).\n- [@module-federation/typescript](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/typescript)\n  from the creator of Webpack Module Federation, Zack Jackson (aka [ScriptAlchemy](https://twitter.com/ScriptedAlchemy))\n\nZack Jackson was asked for help with\n[several issues](https://github.com/module-federation/module-federation-examples/issues/20#issuecomment-1153131082)\naround his plugin. There was a hope that he can suggest some solutions to the exposed problems, to no avail.\nAfter a month of waiting this package was built.\n\n## Feature comparison tables\n\n| Feature                            | @touk/\u003cbr\u003efederated-types | ruanyl/dts-loader | ruanyl/webpack-remote-types-plugin | @module-federation/typescript | @cloudbeds/webpack-module-federation-types-plugin |\n|------------------------------------|---------------------------|-------------------|------------------------------------|-------------------------------|---------------------------------------------------|\n| Webpack Plugin                     | -                         | +                 | +                                  | +                             | +                                                 |\n| Standalone                         | +                         | -                 | -                                  | -                             | +                                                 |\n| Polyrepo support                   | -                         | +                 | +                                  | +                             | +                                                 |\n| Runtime microapp imports           | -                         | -                 | -                                  | -                             | +                                                 |\n| Support typings from node_modules  | -                         | -                 | -                                  | -                             | +                                                 |\n| Webpack aliases                    | -                         | -                 | -                                  | -                             | +                                                 |\n| Exposed aliases                    | +                         | +                 | +                                  | -                             | +                                                 |\n| Excessive recompilation prevention | -                         | -                 | -                                  | -                             | +                                                 |\n\n*_Runtime microapp imports_ refers to templated remote URLs that are resolved in runtime using\n[module-federation/external-remotes-plugin](https://github.com/module-federation/external-remotes-plugin)\n\n*_Synchronization_ refers to [webpack compile hooks](https://webpack.js.org/api/compiler-hooks/)\n\n*_Excessive recompilation_ refers to the fact that the plugin is not smart enough to detect when the typings file is\nchanged.\nEvery time a `d.ts` file is downloaded, webpack recompiles the whole bundle because the watcher compares the timestamp\nonly, which is updated on every download.\n\n| Package                                           | Emitted destination                                  | Download destination | Synchronization/[compile hooks](https://webpack.js.org/api/compiler-hooks/)                                                                                                                   |\n|---------------------------------------------------|------------------------------------------------------|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| @touk/federated-types                             | file in \u003cbr\u003e `node_modules/@types/__federated_types` | -                    | -                                                                                                                                                                                             |\n| ruanyl/dts-loader                                 | folders in \u003cbr\u003e `.wp_federation`                     | -                    | -                                                                                                                                                                                             |\n| ruanyl/webpack-remote-types-plugin                | -                                                    | `types/[name]-dts`   | download on `beforeRun` and `watchRun`                                                                                                                                                        |\n| @module-federation/typescript                     | folders in \u003cbr\u003e `dist/@mf-typescript`                | `@mf-typescript`     | compile and download on `afterCompile` (leads to double compile), \u003cbr\u003e redo every 1 minute when idle                                                                                          |\n| @cloudbeds/webpack-module-federation-types-plugin | file in \u003cbr\u003e `dist/@types`                           | `src/@types/remotes` | download on startup with `beforeRun` for build mode and `watchRun` after first compilation in watch mode \u003cbr\u003e Compile `afterEmit` \u003cbr\u003e Download every 1 minute or custom interval when idle |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbeds%2Fwebpack-module-federation-types-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudbeds%2Fwebpack-module-federation-types-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbeds%2Fwebpack-module-federation-types-plugin/lists"}