使用 CRACO、React 和 typescript 的模块联合会抛出错误：找不到模块无法解析模块“mfe1/Component”

Question

craco.config.js for mfe1

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
  
module.exports = {
    mode: 'development',
    devServer: {
        port: 9999,
    },
    plugins: 
        new ModuleFederationPlugin(
        {
            name: "mfe1",
            filename:"remoteEntry.js",
            library: {
                type: "var",
                name: "mfe1",
            },
            exposes: {
                // expose each component
                "./Component": "./src/index.tsx",
            },
        })
};

craco.config.js for mfe2

const ModuleFederation = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
      resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/,
          },
        ],
      },
      resolve: {
        extensions: [".tsx", ".ts", ".js"],
      },
      output: {
        publicPath: "http://localhost:3000/",
      },
      plugins: 
        new ModuleFederation({
            name: 'mfe2',
            filename: 'remoteEntry.js',
            remotes: {
                mfe1: 'mfe1@http://localhost:9999/remoteEntry.js',
            }
        }),
}

const RemoteComponent = React.lazy(()=>import("mfe1/Component"));

1. Application contains 2 microfrontends - mfe1 and mfe2
2. mfe1 exposes Component mfe2 imports remote component from mfe1
3. Import throws error: Cannot find module 'mfe1/Component' or its corresponding type declarations.

Answer 1

Do not expose extension in line: "./Component": "./src/index.tsx", use simply

exposes: {
                // expose each component
                "./Component": "./src/index",
},

btw it's recommended not exposing index.tsx as the "usual" setup is index.js

import('./app/bootstrap.tsx'); //its for react + moduleFederation

bootstrap will contains the originial index.js content then bootstrap will import into the root.render.

After this you can simply expose "./Component": "./src/App".

Answer 2

You must declare the Module in your host application using a module declaration file. In your case, you need to create a file in the same folder as the file you are instantiating, the Sub-Application.

• App.tsx
• mfe1.d.ts

App.tsx

const RemoteComponent = React.lazy(()=>import("mfe1/Component"));

mfe1.d.ts:

declare module "mfe1/Component" {
  const Component: React.ComponentType;

  export default Component;
}

You can see a working example here: https://github.com/module-federation/module-federation-examples/tree/cf2d070c7bbb0d5f447cfe33f69e07bcf85f8ddb/typescript