bridge-react (0.21.1): Created types are not correct

[NGorteTC]

Describe the bug

I'm using @module-federation/bridge-react and @module-federation/native-federation-typescript to create the remote types in a vite application.

In the current version of @module-federation/bridge-react, the compiled types do not include all necessary types.

When I was using @module-federation/bridge-react@0.8.10 and created a bridge using createBridgeComponent, my compiled types looked like this:

type WidgetProps = {
    text: string;
    number: number;
};
declare const WidgetBridge: () => {
    render(info: import("@module-federation/bridge-react").RenderFnParams & {
        [key: string]: unknown;
    }): Promise<void>;
    destroy(info: {
        moduleName: string;
        dom: HTMLElement;
    }): Promise<void>;
    rawComponent: import("react").ComponentType<WidgetProps>;
    __BRIDGE_FN__: (_args: WidgetProps) => void;
};
export default WidgetBridge;

With the current version, 0.21.1, changing the import to:

import { createBridgeComponent } from "@module-federation/bridge-react/v18";

I only get this:

declare const WidgetBridge: any;
export default WidgetBridge;

Using the legacy import:

import { createBridgeComponent } from "@module-federation/bridge-react";

the types are:

declare const WidgetBridge: () => {
   render(info: import("@module-federation/bridge-react").RenderParams): Promise<void>;
   destroy(info: import("@module-federation/bridge-react").DestroyParams): void;
};
export default WidgetBridge;

So basically the types of my widget are missing with the current version.

Am I missing something?
I could explicitly export my Widget Types and they would be included in the compiled types, but the whole type inference in the host application, which worked before, is still gone.

Thanks for your help.

Reproduction

https://github.com/NGorteTC/mf-bridge-bug-example/tree/main

Run npm run build and check the generated @mf-types in dist.

Used Package Manager

npm

System Info

System:
    OS: macOS 26.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 534.92 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - /Users/u6m2/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /Users/u6m2/.nvm/versions/node/v22.17.0/bin/npm
    Watchman: 2025.06.30.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 141.0.7390.109
    Edge: 141.0.3537.92
    Firefox: 143.0.4
    Safari: 26.0

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[danpeen]

@NGorteTC Let me check.

[2heal1]

Hey , you can just use mf dts to get types . Here is the solution:

1. Install @module-federation/cli https://module-federation.io/guide/basic/cli.html#dts
2. Create module-federation.config.ts which content is equal with your current mf config

import type { ModuleFederationOptions } from "@module-federation/vite/lib/utils/normalizeModuleFederationOptions";

export default  {
  name: "remote",
  manifest: true,
  exposes: {
    "./widget": "./src/widget.tsx",
  },
  dts:{
    // NOTE: this is important , because you project is using tsconfig.app.json as final ts config
    tsConfigPath: "./tsconfig.app.json",
  }
} as ModuleFederationOptions;

3. add dts.tsConfigPath to your real tsconfig "./tsconfig.app.json"
4. execute mf dts and check the dist/@mf-types/compiled-types/widget.d.ts, the content should be like this:

declare const WidgetBridge: () => {
    render(info: import("@module-federation/bridge-react/v18").RenderParams): Promise<void>;
    destroy(info: import("@module-federation/bridge-react/v18").DestroyParams): void;
};
export default WidgetBridge;

[NGorteTC]

Hey @2heal1 , thanks for the answer.
I've tried the CLI and it creates the output from your answer:

declare const WidgetBridge: () => {
    render(info: import("@module-federation/bridge-react/v18").RenderParams): Promise<void>;
    destroy(info: import("@module-federation/bridge-react/v18").DestroyParams): void;
};
export default WidgetBridge;

But this does still not include the types for my widget:

type WidgetProps = {
  text: string;
  number: number;
};

If I export WidgetProps they are included but then I have to do something like this in my host application:

const Widget = createRemoteAppComponent(...) as ForwardRefExoticComponent<WidgetProps>;

I've looked into the code of v0.8.10 and it seems it used

rawComponent: import("react").ComponentType<WidgetProps>;
__BRIDGE_FN__: (_args: WidgetProps) => void;

as a workaround(?) to include the props and then to provide them in createRemoteComponent in the host application.