How to resolve Module Federation import paths in ESLint with TypeScript?

Question

I have been working on this Micro Front-End project for some time. Since I am using TypeScript with these Module Federation configurations, I was able to solve type issues using the @cloudbeds/webpack-module-federation-types-plugin library. Even though those type issues are fixed, I am still getting import errors from every Micro Front-End import.

Code: import Modulex from 'mf1/modulex';

Error: Unable to resolve path to module 'mf1/modulex'.eslint (import/no-unresolved)

This wasn't actually a major issue during the development phase, but it has become a significant problem now that I am running Jest test suites. It always throws these import errors and cannot find the module mf1/modulex in some tests.

I have tried out couple of things but still didn't go anywhere from this state. First thing I tried was to resolve it from eslintrc.js. What I tried to do was to resolve import paths using web pack config like this.

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
        moduleDirectory: ['node_modules', 'src/'],
      },
      webpack: {
        config: 'webpack.config.js',
      },
    },
  },

And the other thing I tried was to add an alias to my webpack config.

  resolve: {
    fallback: {
      ...
    },
    extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],
    alias: {
      mf1: 'mf1@http://localhost:3001/remoteEntry.js',
      ...
    },
  },

I am open to hear anything from you guys. Please throw any suggestions or workarounds.

Answer 1

If you're already using TypeScript, then there's not much use for import/no-unresolved edit: for TypeScript source files. TypeScript will generally already check for you that imports match to a module. I'd suggest turning it off in your ESLint config:

{
  // ...
  rules: {
    'import/no-unresolved': 'off'
  },
  // ...
}

Avoiding many of the import/* rules is mentioned in https://typescript-eslint.io/linting/troubleshooting/performance-troubleshooting#eslint-plugin-import. no-resolve isn't on that list there so I filed a docs issue on typescript-eslint: https://github.com/typescript-eslint/typescript-eslint/issues/7894. Good question!