How to Implement Type in Module Federation (Poly repo)

When you're building a Typscript micro-frontend project with Webpack Module Federation, you might have type problems (no type support when import package from remote). But it's depend on what type of git repository of the project.

If it's a mono repo ... no problem, just import type from other package (in the same repo!)

If it's a poly repo ... you might have to import type from remote, but how?

use @module-federation/typescript

---

Prepare project

# setup pnpm project 
mkdir remote-typesafe && cd remote-typesafe/
pnpm init -y

# setup workspace
cat >> package-workspace.yml << 'END'
packages:
  - host 
  - remote
END

# create host
npx create-mf-app
# name: host
# type: Application
# port: 8080
# framework: react 
# language: typescript 

# create remote
npx create-mf-app
# name: remote
# type: Application
# port: 8080
# framework: react 
# language: typescript 

# install packages 
pnpm i 

# then, we will have folder structure like these
# |- /remote-typesafe
# |  |- host/
# |  |- remote/

Installation

You need to install @module-federation/typescript both host app and remote app

# when I'm writing this blog 0.2.2 is the most stable version
pnpm i -D @module-federation/typescript@0.2.2

Configuration

Add the plugin both host app and remote app

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

module.exports = {
  // ...weboack config 
  plugins: [
    new ModuleFederationPlugin(), // module federation main config 
    new FederatedTypePlugin(), // remote typesafe plugin
  ]
}

Development flow

We need to published the remote app first

Here, I add a simple src/Button.tsx component and expose it

export interface ButtonProps {
  title: string
  onClick?: () => void
}

const Button = (props: ButtonProps) => {
  const onClick = () => props?.onClick && props?.onClick()
  return <button onClick={onClick}>{props.title}</button>
}

export default Button

Then, build it!

pnpm build

We will have dist/ that store our remoteEntry.js and dist/@mf-typescript that store our type as Button.d.ts

Then serve it!

pnpm build:start # it's just enter dist and serve this folder 

Now, we move to host app.

We need to start Webpack devServer first (because we're about to dev it!)

pnpm start:live

Webpack will generate @mf-typescript in out root project

All we have to do is import the type and use it! like these

import { ButtonProps } from '../@mf-typesript/remote/Button'

const Button = React.lazy(() => import('remote/Button')) 
  as unknown 
  as React.FC<ButtonProps>

And now, our Button will have type and it will show us some warning when we use invalid type.