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.
Top comments (0)