dts

  • Type: boolean | PluginDtsOptions
  • Required: No
  • Default value: true
  • Usage scenario: used to control Module Federation generation/consumption type behavior

After configuration, the producer will automatically generate a compressed type file @mf-types.zip (default name) during build, and the consumer will automatically pull the type file of remotes and decompress it to @mf-types (default name).

The PluginDtsOptions types are as follows:

interface PluginDtsOptions {
  generateTypes?: boolean | DtsRemoteOptions;
  consumeTypes?: boolean | DtsHostOptions;
  tsConfigPath?: string;
  cwd?: string;
}

generateTypes

  • Type: boolean | DtsRemoteOptions
  • Required: No
  • Default value: true
  • Usage scenario: used to control Module Federation generation type behavior

The DtsRemoteOptions types are as follows:

interface DtsRemoteOptions {
  tsConfigPath?: string;
  typesFolder?: string;
  outputDir?: string;
  deleteTypesFolder?: boolean;
  additionalFilesToCompile?: string[];
  compilerInstance?: 'tsc' | 'vue-tsc';
  compileInChildProcess?: boolean;
  generateAPITypes?: boolean;
  extractThirdParty?: boolean;
  extractRemoteTypes?: boolean;
  abortOnError?: boolean;
  deleteTsConfig?: boolean;
}

When configuring generateTypes to true, the following configuration will be generated by default:

{
  "generateAPITypes": true,
  "abortOnError": false,
  "extractThirdParty": false,
  "extractRemoteTypes": false,
  "compileInChildProcess": true,
  "deleteTsConfig": true
}

extractRemoteTypes

  • Type: boolean
  • Required: No
  • Default value: undefined
  • Usage scenario: When the content of the producer exposes has its own remotes module that re-exports itself, then extractRemoteTypes: true can ensure that the consumer can normally obtain the module type of the producer exposes
  • Example: [Nested type re-export](../guide/basic/type-prompt#Nested type re-export)

Whether to extract the type of remotes.

extractThirdParty

  • Type: boolean
  • Required: No
  • Default value: undefined
  • Usage scenario: When the content of the producer exposes contains a module containing antd, and the consumer does not have antd installed, then extractThirdParty: true can ensure that the consumer can normally obtain the module of the producer exposes type
  • Example: [Third-party package type extraction](../guide/basic/type-prompt#Third-party package type extraction)

Whether to extract third-party package types.

generateAPITypes

Whether to generate the loadRemote type in Federation Runtime

compileInChildProcess

  • Type: boolean
  • Required: No
  • Default value: undefined

Whether generate types in child process

abortOnError

  • Type: boolean
  • Required: No
  • Default value: false

Whether to throw an error when a problem is encountered during type generation

tsConfigPath

  • Type: string
  • Required: No
  • Default value: path.join(process.cwd(),'./tsconfig.json')

priority: dts.generateTypes.tsConfigPath > dts.tsConfigPath tsconfig configuration file path

outputDir

  • Type: string
  • Required: No
  • Default value: undefined

Custom base output directory for generated type assets.

When this option is not set, Module Federation emits @mf-types.zip and @mf-types.d.ts relative to the bundler output directory. If your remote entry is emitted to a nested subdirectory such as production/remoteEntry.js, set dts.generateTypes.outputDir to the same nested output directory so the type artifacts are emitted alongside the entry file.

This keeps the default inferred type URLs aligned with the remote entry path, so consumers usually do not need remoteTypeUrls just because the remote entry is served from a subdirectory.

module-federation.config.ts
new ModuleFederationPlugin({
  filename: 'production/remoteEntry.js',
  dts: {
    generateTypes: {
      outputDir: `dist/react/${process.env.DEPLOY_ENVIRONMENT || 'production'}`,
    },
  },
});

With the config above, the generated files are emitted to dist/react/production/@mf-types.zip and dist/react/production/@mf-types.d.ts.

typesFolder

  • Type: string
  • Required: No
  • Default value: '@mf-types'

The name of the generated compression type file. For example, if typesFolder is set to custom, then the name of the generated compression type file is: custom.zip

deleteTypesFolder

  • Type: boolean
  • Required: No -Default: true

Whether to delete the generated type folder

compilerInstance

  • Type: 'tsc' | 'tsgo' | 'vue-tsc' | 'tspc' | string
  • Required: No
  • Default value: 'tsc'

Instance of compiled type

deleteTsConfig

  • Type: boolean
  • Required: No
  • Default value: true

Whether to delete the temporary tsconfig configuration file.

consumeTypes

  • Type: boolean | DtsHostOptions
  • Required: No
  • Default value: true
  • Usage scenario: used to control Module Federation consumption (loading) type behavior

The DtsHostOptions types are as follows:

interface DtsHostOptions {
  typesFolder?: string;
  abortOnError?: boolean;
  remoteTypesFolder?: string;
  deleteTypesFolder?: boolean;
  maxRetries?: number;
  consumeAPITypes?: boolean;
  family?: 4 | 6;
}

When configuring consumeTypes to true, the following configuration will be generated by default:

{
  "abortOnError": false,
  "consumeAPITypes": true
}

consumeAPITypes

Whether to generate the type of runtime loadRemote API

maxRetries

  • Type: number
  • Required: No
  • Default value: 3

Maximum number of retries for failed loading

abortOnError

  • Type: boolean
  • Required: No
  • Default value: false

Whether to throw an error when a problem is encountered during type loading

typesFolder

  • Type: string
  • Required: No
  • Default value: '@mf-types'

Type storage directory after successful loading

deleteTypesFolder

  • Type: boolean
  • Required: No
  • Default value: true

Before loading type files, whether to delete the previously loaded typesFolder directory

remoteTypesFolder

  • Type: string
  • Required: No
  • Default value: '@mf-types'

typesFolder corresponding to remotes directory configuration

remoteTypeUrls

  • Type: (() => Promise<RemoteTypeUrls>) | RemoteTypeUrls
  • Required: No
  • Default value:undefined

Used for getting the address of the remote type file.

Application scenarios:

  • Only the runtime API is used to load the producer, and no build plugin is used. The MF type file address is informed by creating a module-federation.config.ts configuration file and setting this configuration.
module-federation.config.ts
import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  // ...
  remotes: {
    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
  },
  dts:{
    consumeTypes:{
      remoteTypeUrls: async()=>{
        // Simulate the request interface to obtain the type file address
        const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
          setTimeout(()=>{
            resolve({
              remote1:{
                alias: 'remote1-alias',
                api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
                zip:'http://localhost:8081/custom-dir/@mf-types.zip'
              }
            } )
          },1000)
        });

        return data;
      }
    }
  }
});
  • When remote is remoteEntry.js, the type file address usually directly replaces the js file with the corresponding type file, such as @mf-types.zip, but the actual uploaded type file address is not this, so you can tell MF the real type file address by setting this configuration.
module-federation.config.ts
import { createModuleFederationConfig } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  // ...
  remotes: {
    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
  },
  dts:{
    consumeTypes:{
      remoteTypeUrls: {
        // remote name
        remote1:{
          alias: 'remote1-alias',
          api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
          zip:'http://localhost:8081/custom-dir/@mf-types.zip'
        }
      }
    }
  }
});

family

  • Type: 4 | 6
  • Required: No
  • Default value: 4

Configure the IP version family that will be used for network operations.

typesOnBuild

  • Type: boolean
  • Required: No
  • Default: false

By default, Module Federation does not load type files in production ( process.env.NODE_ENV === 'production' ). To enable type loading in production builds, set typesOnBuild to true .

tsConfigPath

  • Type: string
  • Required: No
  • Default value: path.join(process.cwd(),'./tsconfig.json')

tsconfig configuration file path

cwd

  • Type: string
  • Required: No
  • Default value: undefined

The working directory to run the compiler

displayErrorInTerminal

  • Type: boolean
  • Required: No
  • Default value: true

Whether print error log in terminal