Question 210584 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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'
Tags:

2

Answers


  1. 0

    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
  }
];
    Login or Signup to reply.
  2. 0

    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: {}
  }
]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search