Bug: Type error when using ConfigWithExtends

[doberkofler]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have searched for related issues and found none that matched my issue.
• I have read the FAQ and my problem is not listed.

Relevant Package

typescript-eslint

Playground Link

No response

Repro Code

I get a TypeScript type error scripts-eslint/eslint.config.mjs:7:2 - error TS2353: Object literal may only specify known properties, and 'ignores' does not exist in type 'ConfigWithExtends' when using the ConfigWithExtends type in the following example.

// @ts-check

import tseslint from 'typescript-eslint';

/** @type {import('typescript-eslint').ConfigWithExtends} */
const config_base = {
	ignores: [
		'temp/**/*',
	],
};

/** @type {import('typescript-eslint').ConfigWithExtends[]} */
const configs = [config_base];

const flat_config = tseslint.config(...configs);

export {flat_config};

ESLint Config

No response

tsconfig

No response

Expected Result

n.a.

Actual Result

n.a.

Additional Info

flatconfig_error_1.zip

Versions

package	version
typescript-eslint	7.3.1
TypeScript	5.4.3
ESLint	8.57.0
node	20.11.0

[peachest]

I met the same question. I was learning to use the eslint flat config and suddenly the Webstorm told me that the TSESLint.FlatConfig type is not exported. Some time before this happened, I had checked this declaration file and at that time everything is alright and I can jump to check the FlatConfig type declaration.
See the below screenshot.

And then I checked the history of file @typescript-eslint/utils/dist/ts-eslint/index.d.ts file, it seems like at one time, this file changed, but I am sure it's not by me since the Reader Mode for node_module file is still on.

The export of ./Config is deleted and for sure the type is not alright.
I think this may caused by the package update or something like this.

[peachest]

Now the typescript can only see the extends field in ConfigWithExtends interface，this explains why other field of Config including ignores will be treated as no exist.

[doberkofler]

I just discovered that omitting the eslint-plugin-jest dependency changes the behaviour (no type error) but I have no idea why.

[bradzacher]

In the example you've linked @doberkofler for some reason @typescript-eslint/utils v5 has been installed. It looks like this is just a HORRENDOUS module installation from npm.

eslint-plugin-jest depends on v5 of our tooling.
typescript-eslint depends on v7 of our tooling.

For some reason npm is seeing the v5 dependency and only installing that version.
It's completely disrespecting the declared dependency versions.
I think that you've just run into a pitfall of lock files in that they don't always change/evolve in the way you expect.

Try regenerating your lockfile from scratch to force npm to actually respect things.
I just deleted it and re-installed and it did what it was supposed to - installed v7 at the root and v5 as a child of eslint-plugin-jest

[doberkofler]

I'm sure your findings are correct but I'm not able to resolve this problem.
Already when creating this reduced example I each time removed the package-lock.json file and the node_modules directory to guarantee a clean installation.
I just again to make sure and the error persists.
I use node 20.11.0 and npm 10.5.0.

[doberkofler]

@bradzacher This is the generated lock file: package-lock.json.zip

[bradzacher]

If you check the version listed in ./node_modules/@typescript-eslint/utils/package.json it should be v7

If it's v5 then double check ./node_modules/typescript-eslint - it should contain its own ./node_modules/@typescript-eslint/utils which is v7.

If you don't have a v7 version of the utils package - then that's the cause - npm is doing the wrong thing.

[doberkofler]

If you check the version listed in ./node_modules/@typescript-eslint/utils/package.json it should be v7

It seems to be version 5

If it's v5 then double check ./node_modules/typescript-eslint - it should contain its own ./node_modules/@typescript-eslint/utils which is v7.

It does not seem to contain a ./node_modules/@typescript-eslint/utils directory

If you don't have a v7 version of the utils package - then that's the cause - npm is doing the wrong thing.

I understand:
Would you know if this is a known npm problem?
Does the eslint-plugin-jest need to update to v7?
Is there any other workaround?

[peachest]

I findout it is the eslint-plugin-jest-extended that actually cause problem in my project.

My simple reproduce

1. I delete both dependencies, yarn.lock and node_module for reinstalling all package, then the utils/ is correct
2. I add eslint-plugin-jest. In the lock file eslint-plugin-jest depent the v5 utils/, but strangely the v7 type declaration is also available and IDE will jump to the v7 utils/. I have try close my IDE, delete the .idea/ and restart the IDE to force re-indexing the project but still the IDE find the v7 utils/. So strange!
   
3. I add eslint-plugin-jest-extended, finally the IDE now find the v5 utils/
   

It's strange that in the above 2 situation, in locke file eslint-plugin-jest depents on 2 different version of @typescript-eslint/utils, is this has somthing to do with the confusing behavior of IDE?

I can provide an ugly solution for this, just force typescript use v7 @typescript-eslint/utils using resolutions in your package.json. This work for me

  "devDependencies": {
    "@eslint/js": "^8.57.0",
    "eslint": "^8.57.0",
    "eslint-plugin-jest": "^27.9.0",
    "eslint-plugin-jest-extended": "^2.0.0",
    "typescript": "^5.4.2",
    "typescript-eslint": "^7.3.1"
  },
  "resolutions": {
    "@typescript-eslint/utils": "^7.0.0"
  }

[github-actions]

Uh oh! @peachest, the image you shared is missing helpful alt text. Check #8732 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[github-actions]

Uh oh! @peachest, the image you shared is missing helpful alt text. Check #8732 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[github-actions]

Uh oh! @peachest, the image you shared is missing helpful alt text. Check #8732 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[bradzacher]

Would you know if this is a known npm problem?

I honestly don't know, sorry. I don't use npm myself (I bounce around between yarn1, yarn2 and pnpm) so I don't know if this is expected or not.
It seems like very, very, very wrong behaviour.

Does the eslint-plugin-jest need to update to v7?

Yes they should! They're working on it - jest-community/eslint-plugin-jest#1508
They have some difficulties because they support old versions of node and old versions of eslint (which we do not support).

Is there any other workaround?

If you're using npm 9 - https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides
Yarn/pnpm supports resolutions as @peachest notes.
You could also try just adding @typescript-eslint/utils: "^7" to your devDeps - I'd assume this will force npm to respect that you really really want v7.

[doberkofler]

I've tried adding the resolution but unfortunately it does not solve the problem for me.
I'm using the latest npm version 10.5.0.
I filed the npm SR npm/cli#7300 referring to this SR.

[doberkofler]

I have also tried using:

	"overrides": {
		"typescript-eslint": {
			"@typescript-eslint/utils": "^7.0.0"
		}
	}

but it also does not work.

[nlwillia]

@bradzacher when I npm i -D typescript-eslint into a clean project in npm 10.1.0, I get node_modules/@typescript-eslint/utils where the package version is 7.3.1. But when I look at the dist\ts-eslint\Config.d.ts in that package, the FlatConfig.Config interface is not exported even though it is exported in the main source. I don't understand why that would be when the ClassicConfig.Config interface earlier in the file is exported correctly. I tried building from source myself, and it does the same.

[doberkofler]

The feedback on the npm SR npm/cli#7300 is as follows:

I tried to replicate the issue and ran npm ls @typescript-eslint/utils which appears to be correct and looks like it's not a problem with npm.

└─┬ eslint-plugin-jest@27.9.0
  ├─┬ @typescript-eslint/eslint-plugin@7.3.1
  │ ├─┬ @typescript-eslint/type-utils@7.3.1
  │ │ └── @typescript-eslint/utils@7.3.1
  │ └── @typescript-eslint/utils@7.3.1
  └── @typescript-eslint/utils@5.62.0

[bradzacher]

The more I investigate the more I'm CONVINCED that npm is doing the wrong thing here.
But that's ultimately neither here nor there because that's just how it works.

#8738 should fix this by explicitly declaring the dep so that npm at least nests /utils within typescript-eslint so types will work.

[AndreaPontrandolfo]

@bradzacher i have a pnpm workspace and i'm encountering the same problem. this is definitely unexpected behaviour.