Bug: Type inference error when using tseslint.config() with eslint-plugin-react

[printfn]

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.

Issue Description

Using eslint-plugin-react inside of the tseslint.config() function in eslint.config.js causes the following type error in VS Code:

Argument of type '{ plugins: { react: { deprecatedRules: { [x: string]: any; [x: number]: any; [x: symbol]: any; }; rules: any; }; }; rules: { [x: string]: number; [x: number]: number; [x: symbol]: number; }; readonly languageOptions: any; } & { ...; }' is not assignable to parameter of type 'ConfigWithExtends'.
  Types of property 'plugins' are incompatible.
    Type '{ react: { deprecatedRules: { [x: string]: any; [x: number]: any; [x: symbol]: any; }; rules: any; }; }' is not assignable to type 'Plugins'.
      Property 'react' is incompatible with index signature.
        Object literal may only specify known properties, and 'deprecatedRules' does not exist in type 'Omit<Plugin, "configs">'.

eslint.config.js:

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintReact from 'eslint-plugin-react/configs/recommended.js';
import jsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';

export default tseslint.config(
	eslint.configs.recommended,
	...tseslint.configs.recommended,
	eslintReact, // type error is on this line
	jsxRuntime,
	{
		settings: {
			react: {
				version: 'detect',
			},
		},
		languageOptions: {
			parserOptions: {
				project: ['./tsconfig.json', './tsconfig.node.json'],
			},
		},
	},
);

I'm not sure if this is a bug in eslint-plugin-react or typescript-eslint, but given that eslint still works correctly and this is purely a type error I opened an issue here.

Reproduction Repository Link

https://github.com/printfn/tseslint-react-repro

Repro Steps

1. Clone the repo
2. npm install
3. Open the repository in VS Code and open the eslint.config.js file
4. Notice that the line eslintReact has a type error

Versions

package	version
@typescript-eslint/eslint-plugin	7.0.2
@typescript-eslint/parser	7.0.2
@typescript-eslint/scope-manager	7.0.2
@typescript-eslint/typescript-estree	7.0.2
@typescript-eslint/type-utils	7.0.2
@typescript-eslint/utils	7.0.2
TypeScript	5.3.3
ESLint	8.56.0
node	21.6.2

[bradzacher]

For some reason they export a deprecatedRules property on their plugin. It's been there for quite some time (>8y). Dunno why but that's neither here nor there. 🤷‍♂️

There's a weird thing happening. I can reproduce the error in your repro but I can't reproduce it in the playground.

I'm not sure why TS is erroring on this.
The assignment is completely valid based on structural typing.

Filed an upstream issue:
microsoft/TypeScript#57460

[bradzacher]

Filed jsx-eslint/eslint-plugin-react#3694 which should fix a flat config bug and also fix this type issue.

[bradzacher]

Closing as there's nothing we can do about this:

1. it's a confirmed bug in TS's inference for untyped modules and not an issue with our types
2. it can be improved and fixed by some minimal annotations to the react plugin