eslint-plugin-react breaking, TypeError: Key "plugins": Key "0": Expected an object

Question

Eslint breaking when ran while using recommended config from eslint-plugin-react. Attempting to follow the (new: eslint.config.js) section here https://github.com/jsx-eslint/eslint-plugin-react

> Oops! Something went wrong! :(
> 
> ESLint: 8.45.0
> 
> TypeError: Key "plugins": Key "0": Expected an object.
> at Object.validate (/home/kris3579/personalProjects/mal-ranker/node_modules/eslint/lib/config/flat-config-schema.js:315:23)
> at ObjectSchema.validate (/home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/object-schema/src/object-schema.js:218:35)
> at /home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/object-schema/src/object-schema.js:171:18
> at Array.reduce (<anonymous>)
> at ObjectSchema.merge (/home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/object-schema/src/object-schema.js:169:24)
> at /home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/config-array/api.js:916:42
> at Array.reduce (<anonymous>)
> at FlatConfigArray.getConfig (/home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/config-array/api.js:915:39)
> at FlatConfigArray.isFileIgnored (/home/kris3579/personalProjects/mal-ranker/node_modules/@humanwhocodes/config-array/api.js:943:15)
> at /home/kris3579/personalProjects/mal-ranker/node_modules/eslint/lib/eslint/eslint-helpers.js:312:49
> 

eslint.config.js

const js = require('@eslint/js');
const react = require('eslint-plugin-react');

module.exports = [
  js.configs.recommended,
  react.configs.recommended,
  {
    files: ["**/*.js", "**/*.mjs"],
    plugins: {
      react,
    },
  }
];

I have tried using the more explicit 'const reactRecommended = require('eslint-plugin-react/configs/recommended');' from the docs, same error.

package.json

{
  "name": "placeholder",
  "version": "0.7",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "dotenv": "16.3.1",
    "js-cookie": "^3.0.5",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.1",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",
    "react-table": "^7.8.0",
    "styled-components": "^6.0.4",
    "superagent": "8.0.9"
  },
  "devDependencies": {
    "@eslint/js": "^8.45.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint './**/*.js'"
  },
}

Also added global.d.ts after seeing a warning 'Could not find a declaration file for module 'eslint-plugin-react', no change to the error

declare module 'eslint-plugin-react'

Answer 1

This is related to the incompatibility between the classic .eslintrc style config and the new Flat config eslint.config.js. See More powerful and configurable plugins. Most plugin authors haven't migrated their plugins to support the new flat config, so here we are.

See the related issue discussing this problem: https://github.com/eslint/eslint/issues/17355

For now you can change eslint-plugin-react yourself, or better open a PR to provide the changes needed.

eslint.config.js (same if using CJS)

import react from 'eslint-plugin-react'

// Begin fix
react.configs.recommended.plugins = { react }
react.configs.recommended.languageOptions = {
  parserOptions: react.configs.recommended.parserOptions
}
delete react.configs.recommended.parserOptions
// End fix

export default [
  react.configs.recommended,
  // Now add your own config
  {
    languageOptions: {},
    files: ['**/*.js'],
    plugins: {
      react
    },
    rules: {}
  }
]

Answer 2

As per the docs plugins need to be in array.

const js = require('@eslint/js');
const react = require('eslint-plugin-react');

module.exports = [
  js.configs.recommended,
  react.configs.recommended,
  {
    files: ["**/*.js", "**/*.mjs"],
    plugins: ['react'], // Change this to an array
  }
];