vercel/next.js

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

J4v4Scr1pt opened this issue · 1 comments

J4v4Scr1pt commented

Link to the code that reproduces this issue

https://github.com/J4v4Scr1pt/ThnJK/tree/upgradeToNextjs15andReact19

To Reproduce

Open the project and open the Output tab, choose ESLint in the dropdown.
image

Current vs. Expected behavior

Current:
ESLint fails on build/setup.

Expected:
Not to fail on build/setup.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32470
  Available CPU cores: 12
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 8.8.0
Relevant Packages:
  next: 15.1.0 // Latest available version is detected (15.1.0).
  eslint-config-next: 15.1.0
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
Next.js Config:
  output: N/A

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

Linting

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

next dev (local)

Additional context

I have problems with my ESLint after upgrading to NextJs 15 and ESLint 9.
I have looked in both the Docs and created a new nextjs app to view the config.
The fresh Nextjs app from create-nextjs do not fail on this issue, which make this even harder for me to debug and understand why this fails in my application.

Searched issues and discussions on GitHub and could not find any with same problem.

ESLint fails with this:

[Info  - 1:16:45 PM] ESLint server is starting.
[Info  - 1:16:46 PM] ESLint server running in node v22.12.0
[Info  - 1:16:46 PM] ESLint server is running.
[Info  - 1:16:48 PM] ESLint library loaded from: C:\Workspace\ThnJK\node_modules\.pnpm\eslint@9.17.0\node_modules\eslint\lib\api.js
[Error - 1:16:50 PM] Calculating config file for file:///c%3A/Workspace/ThnJK/next.config.mjs) failed.
Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals » C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js': Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- C:\Workspace\ThnJK\__placeholder__.js
Referenced from: C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js
    at Function.<anonymous> (node:internal/modules/cjs/loader:1249:15)
    at mod._resolveFilename (C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js:50:26)
    at Function.resolve (node:internal/modules/helpers:148:19)
    at Module.resolve (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/shared/relative-module-resolver.js:23:46)
    at ConfigArrayFactory._loadPlugin (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:1068:33)
    at ConfigArrayFactory._loadExtendedPluginConfig (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:887:29)
    at ConfigArrayFactory._loadExtends (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:808:29)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:749:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:694:20)
[Error - 1:16:50 PM] Calculating config file for file:///c%3A/Workspace/ThnJK/package.json) failed.
Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals » C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js': Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- C:\Workspace\ThnJK\__placeholder__.js
Referenced from: C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js
    at Function.<anonymous> (node:internal/modules/cjs/loader:1249:15)
    at mod._resolveFilename (C:\Workspace\ThnJK\node_modules\.pnpm\eslint-config-next@15.1.0_eslint@9.17.0_typescript@5.7.2\node_modules\eslint-config-next\index.js:50:26)
    at Function.resolve (node:internal/modules/helpers:148:19)
    at Module.resolve (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/shared/relative-module-resolver.js:23:46)
    at ConfigArrayFactory._loadPlugin (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:1068:33)
    at ConfigArrayFactory._loadExtendedPluginConfig (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:887:29)
    at ConfigArrayFactory._loadExtends (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:808:29)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:749:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (file:///C:/Workspace/ThnJK/node_modules/.pnpm/@eslint+eslintrc@3.2.0/node_modules/@eslint/eslintrc/lib/config-array-factory.js:694:20)

ESLint config:

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
	baseDirectory: __dirname,
});

const eslintConfig = [
	...compat.config({
		extends: ['next/core-web-vitals', 'next/typescript', 'prettier'],
	}),
];

export default eslintConfig;

package.json:

{
	"name": "my-app",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"preinstall": "npx only-allow pnpm",
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@internationalized/date": "3.6.0",
		"@nextui-org/react": "^2.6.8",
		"@tanstack/react-query": "^5.62.7",
		"@tanstack/react-query-devtools": "^5.62.7",
		"@iconify/react": "^5.1.0",
		"clsx": "^2.1.1",
		"framer-motion": "11.14.4",
		"lenis": "^1.1.18",
		"mini-svg-data-uri": "^1.4.4",
		"next": "15.1.0",
		"next-themes": "^0.4.4",
		"postcss": "8.4.49",
		"react": "19.0.0",
		"react-dom": "19.0.0",
		"sonner": "^1.7.1",
		"tailwind-merge": "^2.5.5",
		"usehooks-ts": "^3.1.0",
		"zod": "^3.24.1"
	},
	"devDependencies": {
		"@eslint/eslintrc": "3.2.0",
		"@next/bundle-analyzer": "15.1.0",
		"@tanstack/eslint-plugin-query": "^5.62.1",
		"@types/node": "22.10.2",
		"@types/react": "19.0.1",
		"@types/react-dom": "19.0.2",
		"autoprefixer": "10.4.20",
		"cross-env": "^7.0.3",
		"eslint": "9.17.0",
		"eslint-config-next": "15.1.0",
		"eslint-config-prettier": "^9.1.0",
		"prettier": "3.4.2",
		"prettier-plugin-tailwindcss": "^0.6.9",
		"tailwind-variants": "^0.3.0",
		"tailwindcss": "3.4.16",
		"typescript": "5.7.2"
	},
	"overrides": {
		"@types/react": "19.0.1",
		"@types/react-dom": "19.0.2"
	}
}
J4v4Scr1pt commented

The problem is that I need to have an .npmrc file with this line of code:
public-hoist-pattern[]=*@nextui-org/*

Which means this is not related to nextjs at all.