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.