@module-federation/typescript

Typescript support for module federated apps

Installation

$ npm i @module-federation/typescript

Usage

Register the plugin in webpack configuration (webpack.config.js) file

const FederatedTypesPlugin = require('@module-federation/typescript')

const federationConfig = {
  name: 'my-app',
  filename: 'remoteEntry.js',
  exposes: {
    //...exposed components
    './Button': './src/Button',
    './Input': './src/Input',
  },
  remotes: {
    app2: 'app2@http://localhost:3002/remoteEntry.js', // or Just the URL 'http://localhost:3002/remoteEntry.js'
  },
  shared: ['react', 'react-dom'],
}

plugins: [
  // ...
  new ModuleFederationPlugin(federationConfig),
  new FederatedTypesPlugin(), // Optional: you can pass federationConfig object here as well
]

You need to register this plugin in both remote and host apps. The plugin will automatically create a directory named @mf-typescript in the host app - that contains all the types exported by the remote apps.

In your file:

import RemoteButtonType from "../@mf-typescript/Button";

const RemoteButton = React.lazy(
  () => import("app2/Button")
) as unknown as typeof RemoteButtonType;

Usage in Next.js

You need to manually pass the federationConfig object to the plugin. The remotes value should contain absolute path.

Sample code:

// next.config.js
const FederatedTypesPlugin = require('@module-federation/typescript')

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(
      new ModuleFederationPlugin(federationConfig),
      new FederatedTypesPlugin({
        ...federationConfig,
        remotes: { app2: 'app2@http://localhost:3000/remoteEntry.js' }
      })
    )
    return config
  },
}

Support

Drop me a message on twitter for support/feedback, or maybe just say Hi at @pavan_divi

Credits

Shoutout to @ScriptedAlchemy for helping with the development of this plugin.