使用eslint-plugin-react推荐配置时触发TypeError报错求助

问题现象 #

使用ESLint 8.45.0的新Flat Config格式（eslint.config.js）配置eslint-plugin-react推荐规则时，运行ESLint触发以下错误：

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,
    },
  }
];

package.json依赖片段 #

{
  "devDependencies": {
    "@eslint/js": "^8.45.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2"
  }
}

手动添加的类型声明文件global.d.ts #

declare module 'eslint-plugin-react'

解决方案 #

核心原因 #

你使用的eslint-plugin-react@7.32.2版本不支持ESLint的Flat Config格式，它的configs.recommended是旧版ESLint配置格式，直接混入Flat Config会导致结构不兼容，触发类型错误。

具体修复步骤 #

1. 升级eslint-plugin-react到支持Flat Config的版本
   执行命令更新插件：

   npm install eslint-plugin-react@latest --save-dev
   

   升级后版本会进入^8.0.0系列，该版本原生支持Flat Config。

2. 修改eslint.config.js配置
   新版插件的Flat Config推荐规则在react.configs.flat.recommended路径下，调整配置如下：

   const js = require('@eslint/js');
   const react = require('eslint-plugin-react');
   
   module.exports = [
     js.configs.recommended,
     // 使用Flat格式的React推荐规则
     react.configs.flat.recommended,
     {
       files: ["**/*.js", "**/*.mjs"],
       plugins: {
         react,
       },
       // 根据项目需求添加额外规则，比如React 17+不需要导入React的规则
       rules: {
         "react/react-in-jsx-scope": "off"
       }
     }
   ];
   

3. 清理多余类型声明
   eslint-plugin-react@8.x自带TypeScript类型声明，之前手动添加的global.d.ts可以删除，类型警告会自动消失。

内容的提问来源于stack exchange，提问作者Digital