[Bug]: Error when using flat config

[rdebeasi]

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 receive an "Oops! Something went wrong!" error when using eslint-plugin-react with a flat config.

eslint.config.js

import js from "@eslint/js";
import pluginReact from "eslint-plugin-react";

export default [
  js.configs.recommended,
  pluginReact.configs.recommended,
  pluginReact.configs["jsx-runtime"],
  {
    files: ['src/**/*.js', 'src/**/*.jsx'],
    settings: { react: { version: "18.2" } },
    rules: {
      "react/jsx-no-target-blank": "off",
    },
  },
];

Error message

Oops! Something went wrong! :(

ESLint: 8.56.0


A config object has a "plugins" key defined as an array of strings.

Flat config requires "plugins" to be an object in this form:

    {
        plugins: {
            react: pluginObject
        }
    }

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#importing-plugins-and-custom-parsers

If you're using a shareable config that you cannot rewrite in flat config format, then use the compatibility utility:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

When I remove eslint-plugin-react, the error goes away.

eslint.config.js without eslint-plugin-react

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    files: ['src/**/*.js'],
    settings: { react: { version: "18.2" } },
    rules: {
      "react/jsx-no-target-blank": "off",
    },
  },
];

Expected Behavior

When a flat config is used with eslint-plugin-react, running the linter from the CLI returns either a success code or a list of linter errors.

eslint-plugin-react version

7.33.2

eslint version

8.56.0

node version

20.7.0

[rdebeasi]

Quick update: I was able to use the plugin with flat config by following these instructions from the readme.

Would you like me to close this ticket, or is there more work to be done to fully support flat configs?

[ljharb]

lol oops, i forgot we do support flat config :-) glad you found the section in the readme!

[Miguel-A-Jara]

If anyone finds this issue, I was using ESM and according to the docs, we need to import this plugin with the .js extension.

My code is as follows:

import eslint from '@eslint/js'
import react from 'eslint-plugin-react/configs/recommended.js' <---- Note the extension here
import tseslint from 'typescript-eslint'

export default tseslint.config( <--- This is the same as export default [...]
  react, 
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/consistent-type-imports': 'error',
    },
  },
)

[quememo]

When using ESM, I get a TS error: Could not find a declaration file for module eslint-plugin-react/configs/recommended.js.
Could that be improved on the part of the library?