TypeError when tsconfig extends with multiple config files

[nonameolsson]

Description

We are utilizing TypeScript's feature that allows extending a tsconfig.json with multiple config files. When extending two or more configs in a tsconfig, we encounter the following error during linting:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array
Occurred while linting /xxx/xxx/calendars/src/lib/Components/Board/Board.svelte:3
Rule: "import/namespace"

Configuration files

calendars/tsconfig.json:

{
  "extends": ["../tsconfig.json", "./.svelte-kit/tsconfig.json"], // <- THIS IS THE LINE
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["src/testing/coverage/**/*", "src/testing/report/**/*"]
}

tsconfig.json

{
  "compilerOptions": {
    "strict": false
  }
}

.eslinrc.json

{
  "extends": [
    "@tma/eslint-config/library/svelte-lib",
    "plugin:import/recommended",
    "plugin:import/typescript"
  ],
  "root": true,
  "ignorePatterns": ["dist/", "src/testing/report/"],
  "rules": {
    "@typescript-eslint/consistent-type-exports": "error",
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/no-import-type-side-effects": "error",
    "@typescript-eslint/no-unsafe-argument": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/no-unsafe-call": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "func-style": "off",
    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "import/order": [
      "error",
      {
        "alphabetize": {
          "caseInsensitive": false,
          "order": "asc",
          "orderImportKind": "asc"
        },
        "groups": [["external", "internal"], "builtin", "object", "parent", "sibling", "index"],
        "newlines-between": "ignore"
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreDeclarationSort": true
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.svelte"],
      "processor": "svelte3/svelte3",
      "rules": {
        // Exported component props should be at the top of the component
        "import/exports-last": "off",
        // Freaks out with svelte3
        "import/first": "off",
        // Exports can't be combined in svelte3
        "import/group-exports": "off",
        "import/newline-after-import": "error",
        "import/order": [
          "error",
          {
            "alphabetize": {
              "caseInsensitive": false,
              "order": "asc",
              "orderImportKind": "asc"
            },
            "groups": [["external", "internal"], "builtin", "object", "parent", "sibling", "index"],
            "newlines-between": "ignore"
          }
        ],
        "sort-imports": [
          "error",
          {
            "ignoreDeclarationSort": true
          }
        ]
      }
    }
  ],
  "settings": {
    "import/internal-regex": "^@tma/",
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  }
}

package.json

"@tma/mediacenter-css": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"eslint": "^8.55.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jest-dom": "^4.0.3",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-testing-library": "^5.11.0",
"svelte": "^3.59.1",
"svelte-check": "^3.4.3",
"typescript": "5.2.2",

Additional Info

I noticed that it's possible to reference multiple tsconfig files using eslint-import-resolver-typescript. In the settings of the .eslinrc.json file, you can try specifying the project as an array.

However, our requirement is to use one tsconfig that extends other ones.

  "settings": {
    "import/resolver": {
      "typescript": {
        "project": ["./tsconfig.json", "../tsconfig.json"]
      }
    }
  }

Related issues
#1931
import-js/eslint-import-resolver-typescript#21

Any assistance in resolving this issue would be highly appreciated. We value the effectiveness of this package and aim to continue using it despite this current roadblock. Thank you! 🙏

[ljharb]

Until tsconfig-paths v3 supports extends, we can’t support it. See #2447 and many others.

[dkrieger]

@ljharb the linked blocker was backported some time ago, can this be re-opened?

[ljharb]

Yes, thanks for the ping!

[michaelfaith]

I'm having trouble recreating this, can you confirm that it's still an issue? If so, what version of typescript are you using and what version of this plugin? Using the examples folder in this repo, I added two paths to the tsconfig's extends and walked through the code that loads tsconfig for the namespace rule (in the export builder), and it loaded the tsconfig fine. You can see it loaded here:

All it uses that for is to know whether esModuleInterop is enabled, which it was able to do successfully in my tests.