ESLint Flat Configuration TypeScript example does not work.

[thedanchez]

Describe the bug
I am trying to configure ESLint for Solid using the new flat configuration file format for ESLint and running into errors in the configuration of the plugin.

Expected behavior
I expect the ESLint Flat config file example to work without any problems.

Environment (please complete the following information):

• OS: macOS 15.1
• Node version (node --version): 22.11.0
• eslint-plugin-solid version (npm list eslint-plugin-solid/yarn why eslint-plugin-solid): ^0.14.5
• eslint version (npm list eslint/yarn why eslint): 9.18.0

Additional context
Using TypeScript config file for ESLint (https://eslint.org/docs/latest/use/configure/configuration-files#typescript-configuration-files)

To Reproduce
Here is my flat config file eslint.config.ts:

import js from "@eslint/js";
import * as tsParser from "@typescript-eslint/parser";
import type { Linter } from "eslint";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import solid from "eslint-plugin-solid/configs/typescript";
import globals from "globals";

export default [
    js.configs.recommended,
    {
        plugins: {
            "simple-import-sort": simpleImportSort,
        },
        rules: {
            "simple-import-sort/imports": "error",
            "simple-import-sort/exports": "error",
        },
    },
    {
        files: ["**/*.ts", "**/*.tsx"],
        ...solid,  // <--- spreading this in causes issues with satisfies Linter.Config[]
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                sourceType: "module",
                project: "./tsconfig.json",
                ecmaFeatures: {
                    jsx: true,
                },
            },
            globals: {
                ...globals.browser,
                ...globals.es2022,
            },
        }
    },
    {
        files: ["backend/**/*.ts"],
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                sourceType: "module",
                project: "./tsconfig.json",
            },
            globals: {
                Bun: true,
            },
        },
    },
    {
        files: ["__tests__/**/*.ts", "__tests__/**/*.tsx"],
        languageOptions: {
            globals: {
                ...globals.node,
                ...globals.vitest,
            }
        },
    },
] satisfies Linter.Config[];

After attempting to spread in the Solid plugin configuration ...solid I get the following error from TypeScript:

Type '{ languageOptions: { parser: typeof tsParser; parserOptions: { sourceType: "module"; project: string; ecmaFeatures: { jsx: true; }; }; globals: { AggregateError: false; Array: false; ArrayBuffer: false; ... 1184 more ...; XSLTProcessor: false; }; }; plugins: { solid: { meta: { name: any; version: any; }; rules: { "c...' is not assignable to type 'Config<RulesRecord>'.
  Types of property 'plugins' are incompatible.
    Type '{ solid: { meta: { name: any; version: any; }; rules: { "components-return-once": RuleModule<"noEarlyReturn" | "noConditionalReturn", [], unknown, RuleListener>; "event-handlers": RuleModule<...>; ... 17 more ...; "no-array-handlers": RuleModule<...>; }; }; }' is not assignable to type 'Record<string, Plugin>'.
      Property 'solid' is incompatible with index signature.
        Type '{ meta: { name: any; version: any; }; rules: { "components-return-once": RuleModule<"noEarlyReturn" | "noConditionalReturn", [], unknown, RuleListener>; "event-handlers": RuleModule<...>; ... 17 more ...; "no-array-handlers": RuleModule<...>; }; }' is not assignable to type 'Plugin'.
          Types of property 'rules' are incompatible.
            Type '{ "components-return-once": RuleModule<"noEarlyReturn" | "noConditionalReturn", [], unknown, RuleListener>; "event-handlers": RuleModule<"naming" | "capitalization" | ... 4 more ... | "spread-handler", [...?], unknown, RuleListener>; ... 17 more ...; "no-array-handlers": RuleModule<...>; }' is not assignable to type 'Record<string, RuleModule>'.
              Property '"components-return-once"' is incompatible with index signature.
                Type 'RuleModule<"noEarlyReturn" | "noConditionalReturn", [], unknown, RuleListener>' is not assignable to type 'RuleModule'.
                  Types of property 'create' are incompatible.
                    Type '(context: Readonly<RuleContext<"noEarlyReturn" | "noConditionalReturn", []>>) => RuleListener' is not assignable to type '(context: RuleContext) => RuleListener'.
                      Types of parameters 'context' and 'context' are incompatible.
                        Type 'RuleContext' is not assignable to type 'Readonly<RuleContext<"noEarlyReturn" | "noConditionalReturn", []>>'.
                          Types of property 'options' are incompatible.
                            Type 'any[]' is not assignable to type '[]'.
                              Target allows only 0 element(s) but source may have more.ts(2322)

I'm unsure exactly what is happening, but I would expect the example in the repository to work without issue.

[DustinEwan]

This looks like a namespace collision issue. I was able to get it to work by doing:

import pluginSolid from "eslint-plug-solid/configs/recommended";

export default [
    // All your other config ...
    pluginSolid,
]

[thedanchez]

This looks like a namespace collision issue. I was able to get it to work by doing:

import pluginSolid from "eslint-plug-solid/configs/recommended";

export default [
// All your other config ...
pluginSolid,
]

Appreciate the reply -- unfortunately, that doesn't apply to TypeScript.

import solid from "eslint-plugin-solid/configs/typescript";

But your example is using:

import pluginSolid from "eslint-plug-solid/configs/recommended";

The crux of the issue has to do with this snippet in the readme not being correct:

import js from "@eslint/js";
import solid from "eslint-plugin-solid/configs/typescript";
import * as tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    ...solid,
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: "tsconfig.json",
      },
    },
  },
];

[thedanchez]

Are there any updates on this? Would really love to get the ESLint rules working for TypeScript using the new flat config structure.