Key "plugins": Cannot redefine plugin "react"

[MehmetYararVX]

Describe the bug

A clear and concise description of what the bug is.

It appears that ESLint throws an error when the same plugin is defined multiple times. For microsoft/eslint-plugin-sdl, it's the react plugin:

eslint-plugin-sdl/config/react.js

Line 21 in 3196a29

react: pluginReact

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "react".

To Reproduce

Steps to reproduce the behavior:

Create an eslint config that uses eslint-plugin-react and microsoft/eslint-plugin-sdl that includes configs["react"], then run ESLint:

import microsoftSdl from "@microsoft/eslint-plugin-sdl";
import react from "eslint-plugin-react";
import tseslint from "typescript-eslint";

export default tseslint.config(
  react.configs.flat.recommended,
  microsoftSdl.configs.recommended
)

Expected behavior

A clear and concise description of what you expected to happen.

ESLint doesn't throw when eslint-plugin-react and @microsoft/eslint-plugin-sdl used together.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS Sequoia
• Browser [e.g. chrome, safari] N/A
• Version [e.g. 22] 1.1.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[MehmetYararVX]

The following could cause issues, too:

eslint-plugin-sdl/config/node.js

Line 12 in 3196a29

n: pluginN

eslint-plugin-sdl/config/typescript.js

Line 25 in 3196a29

parser: "@typescript-eslint/parser"

[juanscr]

Hi, I found this issue as well. For now, I had to hack around it so the react eslint object is recreated without the plugin key. Something like this:

export default tseslint.config(
  {
    settings: {
      react: {
        version: 'detect', // Automatically detect the version of React to use
      },
    }
  },
  // SDL
  microsoftSdl.configs.recommended,
  // Recreate react tools
  {
    rules: {
      ...reactPlugin.configs.flat.recommended.rules,
      ...reactPlugin.configs.flat['jsx-runtime'].rules,
    },
    languageOptions: {
      ...reactPlugin.configs.flat.recommended.languageOptions,
      ...reactPlugin.configs.flat['jsx-runtime'].languageOptions,
    },
  },
)

This works appropriately but it's not ideal, there has to be a way to create this plugin so it doesn't import the plugin or that we can add additional rules for any of the sub-configs avoiding this type of behavior.

[kitsunekyo]

when used with defineConfig the situation gets even worse. the plugin type from microsoftSdl does not match the expected type from eslint.

microsoftSdl.configs.recommended doesnt work either, as typescript reports that Property 'recommended' does not exist on type '{}'. - most likely due to the mutation of the object after the fact before exporting