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

[tiavina-mika]

Is there an existing issue for this?

• [X] I have searched the existing issues and my issue is unique
• [X] 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 https://github.com/jsx-eslint/eslint-plugin-react/pull/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 https://github.com/jsx-eslint/eslint-plugin-react/pull/3759 because it adds tests with flat configs (https://github.com/jsx-eslint/eslint-plugin-react/commit/ef6f9c5dbaca93f45b19e763e73b585a9161ac3a 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 (https://github.com/jsx-eslint/eslint-plugin-react/issues/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.