ESLint defineConfig() type issues

[thernstig]

Goals

Be able to use ESLint defineConfig() without TypeScript errors.

https://eslint.org/blog/2025/03/flat-config-extends-define-config-global-ignores/#introducing-defineconfig()-for-eslint.

Non-Goals

No response

Background

import { flatConfig as nextPlugin } from '@next/eslint-plugin-next';
import { defineConfig, globalIgnores } from 'eslint/config';
import { configs as tseslintConfigs } from 'typescript-eslint';

export default defineConfig([
  globalIgnores(['.next/', 'next-env.d.ts']),
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    extends: [js.configs.recommended],
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    extends: [nextPlugin.coreWebVitals],
  },

  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    extends: [tseslintConfigs.strictTypeChecked],
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    // Required for typescript-eslint and "TypeChecked" rules
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
]);

This gives an error on the line with extends: [nextPlugin.coreWebVitals], that says:

Type '{ name: string; plugins: { '@next/next': { rules: { 'google-font-display': RuleModule; 'google-font-preconnect': RuleModule; 'inline-script-id': RuleModule; ... 17 more ...; 'no-unwanted-polyfillio': RuleModule; }; configs: { ...; }; }; }; rules: { ...; }; }' is not assignable to type 'ExtendsElement'.
  Type '{ name: string; plugins: { '@next/next': { rules: { 'google-font-display': RuleModule; 'google-font-preconnect': RuleModule; 'inline-script-id': RuleModule; ... 17 more ...; 'no-unwanted-polyfillio': RuleModule; }; configs: { ...; }; }; }; rules: { ...; }; }' is not assignable to type 'ConfigObject<RulesConfig>'.
    Types of property 'plugins' are incompatible.
      Type '{ '@next/next': { rules: { 'google-font-display': RuleModule; 'google-font-preconnect': RuleModule; 'inline-script-id': RuleModule; 'next-script-for-ga': RuleModule; ... 16 more ...; 'no-unwanted-polyfillio': RuleModule; }; configs: { ...; }; }; }' is not assignable to type 'Record<string, Plugin>'.
        Property ''@next/next'' is incompatible with index signature.
          Type '{ rules: { 'google-font-display': RuleModule; 'google-font-preconnect': RuleModule; 'inline-script-id': RuleModule; 'next-script-for-ga': RuleModule; ... 16 more ...; 'no-unwanted-polyfillio': RuleModule; }; configs: { ...; }; }' is not assignable to type 'Plugin'.
            Types of property 'configs' are incompatible.
              Type '{ recommended: { plugins: string[]; rules: { '@next/next/google-font-display': string; '@next/next/google-font-preconnect': string; '@next/next/next-script-for-ga': string; '@next/next/no-async-client-component': string; ... 16 more ...; '@next/next/no-script-component-in-head': string; }; }; 'core-web-vitals': { .....' is not assignable to type 'Record<string, ConfigObject<RulesConfig> | LegacyConfigObject<RulesConfig, RulesConfig> | ConfigObject<RulesConfig>[]>'.
                Property 'recommended' is incompatible with index signature.
                  Type '{ plugins: string[]; rules: { '@next/next/google-font-display': string; '@next/next/google-font-preconnect': string; '@next/next/next-script-for-ga': string; '@next/next/no-async-client-component': string; ... 16 more ...; '@next/next/no-script-component-in-head': string; }; }' is not assignable to type 'ConfigObject<RulesConfig> | LegacyConfigObject<RulesConfig, RulesConfig> | ConfigObject<RulesConfig>[]'.
                    Type '{ plugins: string[]; rules: { '@next/next/google-font-display': string; '@next/next/google-font-preconnect': string; '@next/next/next-script-for-ga': string; '@next/next/no-async-client-component': string; ... 16 more ...; '@next/next/no-script-component-in-head': string; }; }' is not assignable to type 'LegacyConfigObject<RulesConfig, RulesConfig>'.
                      Types of property 'rules' are incompatible.
                        Type '{ '@next/next/google-font-display': string; '@next/next/google-font-preconnect': string; '@next/next/next-script-for-ga': string; '@next/next/no-async-client-component': string; '@next/next/no-before-interactive-script-outside-document': string; ... 15 more ...; '@next/next/no-script-component-in-head': string; }' is not assignable to type 'Partial<RulesConfig>'.
                          Property ''@next/next/google-font-display'' is incompatible with index signature.
                            Type 'string' is not assignable to type 'RuleConfig<unknown[]> | undefined'.ts(2322)

Proposal

Fix the TypeScript error.