Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals

[daikiejp]

Link to the code that reproduces this issue

https://github.com/daikiejp/eslint-plugin-react-hooks

To Reproduce

1. Just install a new fresh install of Next.js with pnpm
2. Start editing
3. Error from eslint: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals

Complete error:

eslint: -32603: Request textDocument/diagnostic failed with message: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals » /Users/danny/dev/eslint-plugin-react-hooks/node_modules/.pnpm/eslint-config-next@15.4.0-canary.19_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js': Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- /Users/danny/dev/eslint-plugin-react-hooks/__placeholder__.js
Referenced from: /Users/danny/dev/eslint-plugin-react-hooks/node_modules/.pnpm/eslint-config-next@15.4.0-canary.19_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js

This error is related to #73964

Current vs. Expected behavior

While the fix is simple (pnpm add -D eslint-plugin-react-hooks), it would greatly Next.js should handle peer dependencies and install them in pnpm.

Provide environment information

Operative System:
  Platform: darwin
  Arch: arm64
Binaries:
  Node: v23.11.0
  Pnpm: 10.10.0
Relevant Packages:
  next: 15.4.0-canary.19
  eslint-config-next: 15.4.0-canary.19

Which area(s) are affected? (Select all that apply)

Error Handling, Linting

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

There's no documentation in eslint-config-next about required peer plugins.

[daikiejp]

Update: After install: pnpm add -D eslint-plugin-react-hooks

This error is the next: Failed to load plugin '@next/next' declared in ' » eslint-config-next/core-web-vitals

Need install manually: pnpm add -D @next/eslint-plugin-next

[gedclack]

Thanks @daikiejp , your solution saved my time!

🆙 I do think Next.js need to update deps for ESLint for pnpm v10

[coderrshyam]

+1

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[nattui]

After trying npm and bun, I came to realized it has to do with the pnpm v10

Another way to fix the issue with pnpm without adding devDependencies to package.json is

# pnpm-workspace.yaml
publicHoistPattern:
  - "@next/eslint-plugin-next"
  - "eslint-plugin-react-hooks"

Then remove pnpm-lock.yaml and /node_modules and pnpm install again

Then in VSCode run ESLint: Restart ESLint Server

[coderrshyam]

Nice @nattui but it causes one warning with successfully linting when running pnpm lint: ⚠ The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/app/api-reference/config/eslint#migrating-existing-config ✔ No ESLint warnings or errors.

Here is code:

import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
  recommendedConfig: js.configs.recommended,
});

const eslintConfig = [
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript", "prettier", "plugin:drizzle/recommended"],
    plugins: ["import", "drizzle", "@typescript-eslint"],
    parser: "@typescript-eslint/parser",
    ignorePatterns: [
      "node_modules",
      "dist",
      "build",
      "public",
      "eslint.config.mjs",
      "prettier.config.mjs",
      "postcss.config.mjs",
    ],
    parserOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      project: "./tsconfig.json",
    },
    settings: {
      "import/resolver": { typescript: { alwaysTryTypes: true } },
      next: { rootDir: "./src" },
    },
    rules: {
      // Base rules
      semi: ["error", "always"],
      quotes: ["error", "double", { avoidEscape: true }],
      "comma-spacing": ["error", { before: false, after: true }],
      "prefer-template": "error",
      "arrow-body-style": ["error", "as-needed"],
      "no-var": "error",
      "no-param-reassign": "error",
      "object-shorthand": ["error", "always"],
      "no-multiple-empty-lines": ["warn", { max: 1, maxEOF: 0 }],
      "prefer-const": ["error", { ignoreReadBeforeAssign: true }],

      // TypeScript specific rules
      "@typescript-eslint/consistent-type-imports": [
        "error",
        {
          prefer: "type-imports",
          fixStyle: "inline-type-imports",
        },
      ],
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/consistent-type-definitions": ["error", "interface"],

      // Import rules
      "import/no-duplicates": "error",
      "import/no-unresolved": "error",
      "import/first": "error",
      "no-duplicate-imports": "off", // Turning off in favor of import/no-duplicates

      // Additional strict rules
      "no-console": ["warn", { allow: ["warn", "error"] }],
      "no-unused-expressions": "error",
      "max-depth": ["error", 4],
    },
  }),
];

export default eslintConfig;

[nattui]

Hi @coderrshyam, nice eslint configs! Does this still show the warning for you?

publicHoistPattern:
  - "*eslint*"

[coderrshyam]

Yes @nattui I had already added the following code in .npmrc but the warning still shows:

auto-install-peers=true
lockfile=true
save-exact=true
strict-peer-dependencies=false
public-hoist-pattern[]=*import-in-the-middle*
public-hoist-pattern[]=*require-in-the-middle*
public-hoist-pattern[]=*@next/eslint-plugin-next*
public-hoist-pattern[]=*eslint-plugin-react-hooks*
public-hoist-pattern[]=*eslint*

[nattui]

@coderrshyam How about replacing public-hoist-pattern[]=... to shamefully-hoist=true

[coderrshyam]

No! @nattui I cann't do that, the behaviour of shamefully-hoist=true is not good for my this large project, behaviour is different and cause many issues.

[LiamWinterton]

It's honestly terrible this is still an issue in production.