Next.js项目配置正确仍无法加载ESLint 'next'插件问题

在Next.js项目中配置ESLint时，执行lint命令出现以下错误：

error - ESLint: Failed to load plugin 'next' declared in '.eslintrc.json':
Cannot find module 'E:\Project\node_modules\eslint-plugin-next\index.js'.
Please verify that the package.json has a valid "main" entry
Require stack: - E:\Project\__placeholder__.js

已尝试的调试步骤 #

• 确认eslint-plugin-next已作为开发依赖安装
• 检查node_modules/eslint-plugin-next目录，仅发现package.json文件，无实际代码文件
• 删除node_modules及锁文件后重新安装依赖，问题依旧
• 手动执行npm install eslint-plugin-next，无效

配置文件信息 #

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "next/core-web-vitals"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "import", "jsx-a11y","next"],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "prettier/prettier": "error",
    "no-unused-prop-types": "error",
    "react-in-jsx-scope": "error",
    "prop-types": "error",
    "react/prop-types": "error",
    "react/jsx-filename-extension": ["error", { "extensions": [".jsx", ".tsx"] }],
    "react/no-unused-state": "error",
    "next/no-html-link-for-pages": "off",
    "react/jsx-no-duplicate-props": "error",
    "react/jsx-no-undef": "error",
    "react/no-unknown-property": "error",
    "react/self-closing-comp": "error",
    "jsx-a11y/alt-text": "error",
    "jsx-a11y/no-onchange": "error",
    "jsx-a11y/anchor-is-valid": "error",
    "prefer-arrow-callback": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "import/no-unresolved": "error",
    "import/no-duplicates": "error",
    "import/order": "error",
    "no-console": "error",
    "@next/next/google-font-display": "error",
    "@next/next/google-font-preconnect": "error",
    "@next/next/inline-script-id": "error",
    "@next/next/next-script-for-ga": "error",
    "@next/next/no-assign-module-variable": "error",
    "@next/next/no-async-client-component": "error",
    "@next/next/no-before-interactive-script-outside-document": "error",
    "@next/next/no-css-tags": "error",
    "@next/next/no-document-import-in-page": "error",
    "@next/next/no-duplicate-head": "error",
    "@next/next/no-head-element": "error",
    "@next/next/no-head-import-in-document": "error",
    "@next/next/no-html-link-for-pages": "error",
    "@next/next/no-img-element": "error",
    "@next/next/no-page-custom-font": "error",
    "@next/next/no-script-component-in-head": "error",
    "@next/next/no-styled-jsx-in-document": "error",
    "@next/next/no-sync-scripts": "error",
    "@next/next/no-title-in-document-head": "error",
    "@next/next/no-typos": "error",
    "@next/next/no-unwanted-polyfillio": "error"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    },
    "react": {
      "version": "detect"
    }
  }
}

package.json（devDependencies部分） #

{
  "devDependencies": {
    "@next/eslint-plugin-next": "^12.3.4",
    "@types/node": "^18.14.2",
    "@typescript-eslint/eslint-plugin": "^6.8.0",
    "@typescript-eslint/parser": "^6.8.0",
    "aws-sdk": "^2.1135.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-styled-components": "^2.0.2",
    "cross-env": "^7.0.2",
    "cypress": "^12.3.0",
    "eslint": "^8.52.0",
    "eslint-config-next": "^12.1.6",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-react-app": "^7.0.0",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-next": "^0.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.3.0",
    "graphql-tag": "^2.12.6",
    "prettier": "^2.5.1",
    "prettier-eslint": "^13.0.0",
    "prettier-eslint-cli": "^5.0.0",
    "rimraf": "^3.0.2",
    "typescript": "^5.2.2"
  }
}

解决方案 #

问题根源在于你安装了一个无效的eslint-plugin-next包（版本号为0.0.0，是无实际代码的占位包），而Next.js官方的ESLint插件是@next/eslint-plugin-next，你已经正确安装了这个包。

执行以下步骤修复：

1. 打开package.json，删除devDependencies中的"eslint-plugin-next": "^0.0.0"这一行
2. 打开.eslintrc.json，将plugins数组中的"next"改为"@next/next"（也可以直接去掉这个插件，因为extends中的next/core-web-vitals已经自动引入了该插件）
3. 执行npm install（或yarn install）更新依赖
4. 重新运行lint命令，问题即可解决

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