Missing typescript setting in `flatConfigs.typescript`

[nbouvrette]

With the recent official support of ESLint TypeScript config (ref), when trying to setup the example config in the README file, I get the following issue:

Unable to resolve path to module 'typescript-eslint'.eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.31.0/docs/rules/no-unresolved.md)

I managed to fix this by adding this extra setting:

    settings: {
      'import/resolver': {
        typescript: true,
      },
    },

When I look at what settings flatConfigs.typescript has, it only has the following settings:

    'import/resolver': {
      node: {
        extensions: allExtensions,
      },
    },

I presume we should add typescript: true in flatConfigs.typescript or otherwise maybe mentionning this somewhere in the doc? The only way I was able to fix this was because I had this in a previous config.

[Kolobamanacas]

I'm not sure if my issue happens because of the same reason, but the one mentioned above seems similar to the one I have when I try to add eslint-plugin-import into a fresh Angular project. I'm following these steps:

1. Initialize basic ESling setup with ng add angular-eslint as stated in the angular-eslint's quick start.

2. Add jiti to the project, to be able to store ESlint config in a TS format as stated in the ESLint docs.

3. Add eslint-plugin-import, @typescript-eslint/parser and eslint-import-resolver-typescript to the project as stated in the eslint-plugin-import's docs.

4. Add rules from eslint-plugin-import eslint-import-resolver-typescript to eslint.config.ts file, again as stated in the docs:

// @ts-check
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import angular from 'angular-eslint';
import eslintConfigPrettier from "eslint-config-prettier/flat";
import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
import importPlugin from 'eslint-plugin-import'; /* <-- Reports an error:
Could not find a declaration file for module 'eslint-plugin-import'.
'my-project/node_modules/eslint-plugin-import/lib/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/eslint-plugin-import` if it exists or add a new
declaration (.d.ts) file containing `declare module 'eslint-plugin-import';` ts(7016) */

export default tseslint.config(
  // Default angular-eslint rules.
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },

  // Default angular-eslint rules.
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },

  // Default eslint-import-resolver-typescript rules.
  {
    settings: {
      'import-x/resolver-next': [
        createTypeScriptImportResolver({
          project: 'tsconfig.json'
        }),
      ],
    },
  },

  // Default eslint-plugin-import rules.
  importPlugin.flatConfigs.recommended, // <-- Doesn't work.

  // Default eslint-config-prettier rules. According to the docs, must be the last: https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#what-and-why.
  eslintConfigPrettier,
);

With these steps done, three issues happen:

1. VS Code doesn't recognize any sorting imports issues.

2. Importing anything from eslint-plugin-import in eslint.config.ts returns an error:

Could not find a declaration file for module 'eslint-plugin-import'. 'my-project/node_modules/eslint-plugin-import/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/eslint-plugin-import` if it exists or add a new declaration (.d.ts) file containing `declare module 'eslint-plugin-import';`ts(7016)

3. Importing anything from eslint-plugin-import in eslint.config.ts somehow breaks all alias-imports in the project, all of the start to report Unable to resolve path to module error.

I verbatimly followed every step in every official doc. What do I do wrong?

[JounQin]

@Kolobamanacas If you use 'import-x/resolver-next', you should use https://github.com/un-ts/eslint-plugin-import-x instead.

[Kolobamanacas]

@JounQin, thanks for the tip. I, indeed, copied the settings example from the wrong block in eslint-import-resolver-typescript documentation. However it acts the same way if I replace it with:

{
  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: 'tsconfig.json',
      },
    },
  },
},

[JounQin]

Please provide GitHub repo reproduction.

[nbouvrette]

@Kolobamanacas I think your issue is related to https://github.com/import-js/eslint-plugin-import/issues/3169

• ESLint recently added support for .ts config
• This package does not include any .d.ts file which explains the error you have
• You can use the workaround I provided in https://github.com/import-js/eslint-plugin-import/issues/3169
• If you want to see a fully working example (its not Angular but you should be able to use something similar): https://github.com/resolve-accept-language/resolve-accept-language

[Kolobamanacas]

@nbouvrette, thanks a lot! Indeed overriding types by declaring module solves the issue!

[nbouvrette]

@Kolobamanacas no problem - I also ended up merging @JounQin's PR for permance reasons - you might want to also consider doing that

[thernstig]

@nbouvrette if I understood you correctly, I added this:

  {
    files: ['**/*.{ts,tsx}'],
    extends: [importPlugin.flatConfigs.recommended, importPlugin.flatConfigs.typescript],
    // See https://github.com/import-js/eslint-plugin-import/issues/3170
    settings: {
      'import/resolver': {
        typescript: true,
      },
    },
  },

However, this gives me new errors such as:

/home/userA/code/testeslint.config.ts
  1:1   error    Resolve error: typescript with invalid interface loaded as resolver  import/namespace
  1:1   error    Resolve error: typescript with invalid interface loaded as resolver  import/no-unresolved
  1:1   error    Resolve error: typescript with invalid interface loaded as resolver  import/default
  1:1   warning  Resolve error: typescript with invalid interface loaded as resolver  import/no-duplicates

I am very surprised import tseslint from 'typescript-eslint'; gives the error Unable to resolve path to module 'typescript-eslint' import/no-unresolved considering that is the way to use ESLint according to the latest docs. For completeness sake, "typescript-eslint": "^8.39.1" and "eslint-plugin-import": "^2.32.0", is installed.

I do not know how to fix this.

[ljharb]

because we don't support exports yet, and typescript-eslint doesn't define backwards-compatible entrypoints.

[JounQin]

Resolve error: typescript with invalid interface loaded as resolver

You need to install eslint-import-resolver-typescript manually.