'Importing Remote Components/Methods in Webpack Module Federation

We are using react webpack module federation for a POC projec and we are facing this error when using tsx file(instead of js file used in this examples provide by module federation team)

Cannot find module 'lib/Typography' or its corresponding type declarations.

We have used typings (.d.ts) file and included its path in tsconfig.json without any success.

Right now we are able to circumvent it by using // @ts-ignore which might not be the best solution in the longer run.

Any help/leads on this will be great for us.

import Typography from 'lib/Typography';
// @ts-ignore
const RecentPaymentLazy = lazy(() => import('payment/RecentPayments'));

typings file (lib.d.ts)

/// <reference types="react" />
import { ButtonProps, CircularProgressProps, IconButtonProps, TextFieldProps, TypographyProps } from "@mui/material";
declare module "lib/Typography" {
  const Typography: React.ComponentType<TypographyProps>;
  export default Typography;
}

tsconfig.json file

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": false,
    "module": "esnext",
    "target": "es2015",
    "jsx": "react",
    "types": [
      "node"
    ],
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": false
  },
  "lib": [
    "es2018",
    "dom"
  ],
  "include": [
    "../core/src/lib.d.ts"
  ],
}

Webpack file

 new ModuleFederationPlugin({
      name: 'core',
      remotes: {
        payment: 'payment@http://localhost:3001/remoteEntry.js',
        lib:'lib@http://localhost:3008/remoteEntry.js',
      },

Solution 1:^[1]

If anyone is looking for a poly-repo solution, I've put together this sample app with some instructions to share the type definitions of exposed files: https://github.com/jrandeniya/federated-types-sample

It's relatively straight forward using the great work done by @touk/federated-types and webpack-remote-types-plugin

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Chronix3

'Importing Remote Components/Methods in Webpack Module Federation

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]