Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem

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;  deleteTypesFolder?: boolean;  additionalFilesToCompile?: string[];  compilerInstance?: 'tsc' | 'vue-tsc';  compileInChildProcess?: boolean;  generateAPITypes?: boolean;  extractThirdParty?: boolean;  extractRemoteTypes?: boolean;  abortOnError?: boolean; }

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

{  "generateAPITypes": true,  "abortOnError": false,  "extractThirdParty": false,  "extractRemoteTypes": false,  "compileInChildProcess": 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

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' | 'vue-tsc' | 'tspc' | string
  • Required: No
  • Default value: 'tsc'

Instance of compiled type

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