[Bug]: Key "plugins": Cannot redefine plugin "react"

[tiavina-mika]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

I have this error when runing eslint: Key "plugins": Cannot redefine plugin "react"

here is my eslint.confi.js

import path from 'path';
import { fileURLToPath } from 'url';
import js from "@eslint/js";
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import globals from 'globals';
import reactRecommended from 'eslint-plugin-react/configs/recommended.js';


const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
const __dirname = path.dirname(__filename); // get the name of the directory


export default tseslint.config(
  js.configs.recommended,
  reactRecommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      ecmaVersion: 2022,
      // parser: "@typescript-eslint/parser"
      parser: tseslint.parser,
      parserOptions: {
        sourceType: "module",
        project: true,
        tsconfigRootDir: __dirname,
        ecmaFeatures: {
          jsx: true,
        },
        globals: {
          ...globals.browser,
        },
      },
    },
    plugins: {
      react,
    },
    rules: {},
    ignores: [
      "node_modules/",
    ],
  },
);

Expected Behavior

Should have no errors

eslint-plugin-react version

7.34.2

eslint version

9.4.0

node version

20.22.0

[bsal649]

ESLint v9 isn't supported yet. Either roll back to 8.57 or you can try working around it with @eslint/compat, but that's not guaranteed to work.

[mdjermanovic]

I have this error when runing eslint: Key "plugins": Cannot redefine plugin "react"

This happens because eslint-plugin-react's flat configs have their own plugins.react object that, although functionally the same, is not the same instance as react in import react from 'eslint-plugin-react'.

A quick fix in your eslint.config.js would be to remove one of these two plugin definitions:

-     plugins: {
-       react,
-     },

Nevertheless, I think that eslint-plugin-react should be fixed so that it always uses the same plugin object.

[ljharb]

@mdjermanovic what would be the impact of that change?

[ljharb]

Either way, closing, because you simply can't use eslint 9 with a plugin that doesn't declare peerDep compatibility with it.

Wait to upgrade eslint until all your things support it explicitly.

[mdjermanovic]

@mdjermanovic what would be the impact of that change?

This can be fixed in a way that wouldn't be a breaking change for eslint-plugin-react. We could include the fix in #3759.

Note that this isn't eslint 9 specific. the same problem exists with eslint-plugin-react + eslint 8 flat config.

[ljharb]

Thanks; in that case let's land it in its own PR?

[mdjermanovic]

Thanks; in that case let's land it in its own PR?

Makes sense, I can prepare a separate PR for this issue.

I mentioned #3759 because it adds tests with flat configs (ef6f9c5 for the start) which seem particularly useful for this problem, but those tests can be extracted into the other PR and run with eslint >= 8.57.0 instead of just >= 9.

[ljharb]

Also perhaps #3694 is a good fit for it.

[mdjermanovic]

Also perhaps #3694 is a good fit for it.

Hm, yes, I didn't see that. The issue it references (#3693) is the same as this one. But there's a question of what to do with existing exports (eslint-plugin-react/configs/recommended and others)?

[ljharb]

The existing imports would need to keep working the same for eslintrc users. I'm not sure what that would entail.