[eslint-patch] Failed to patch ESLint when using next/core-web-vitals configuration

[gs0428]

Summary

I encountered an issue while trying to lint a Next.js project using pnpm dlx eslint with the next/core-web-vitals configuration. The ESLint process fails when this configuration is included but works fine when it is removed or commented out. This issue appears to involve @rushstack/eslint-patch in combination with eslint-config-next.

Repro steps

1. Create a new Next.js project using the following command

pnpm dlx create-next-app my-app

2. Navigate to the project directory

cd my-app

3. Default eslint.config.mjs file is like below

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.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

4. Run the following command to lint the page.tsx file

pnpm dlx eslint src/app/page.tsx

Expected result:
The file should be linted without any issues.

Actual result:
The following error is displayed

Oops! Something went wrong! :(

ESLint: 9.17.0

Error: Cannot read config file: /Users/gwangsoo/Desktop/my-app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/eslint-config-next/index.js
Error: Failed to patch ESLint because the calling module was not recognized.
If you are using a newer ESLint version that may be unsupported, please create a GitHub issue:
https://github.com/microsoft/rushstack/issues
Referenced from: /Users/gwangsoo/Desktop/my-app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/eslint-config-next/core-web-vitals.js
    ...

5. Workaround

• Commenting out the next/core-web-vitals configuration in eslint.config.mjs resolves the issue.

const eslintConfig = [
  // ...compat.extends("next/core-web-vitals"),
  ...compat.extends("next/typescript"),
];

• With the above change, the linting process works as expected.

Details

The issue occurs specifically when the next/core-web-vitals configuration is included in the ESLint configuration. Removing this configuration prevents the error. The root cause seems to involve @rushstack/eslint-patch and its handling of this configuration, possibly due to module resolution or versioning conflicts.

Standard questions

Please answer these questions to help us investigate your issue more quickly:

Question	Answer
Package name:	@rushstack/eslint-patch
Package version?	1.10.4
Operating system?	MacOS
Would you consider contributing a PR?	Yes
Node.js version (node -v)?	v20.17.0

[Veklycheva]

Has anyone found a workaround other than deleting next/core-web-vitals from the project? I noticed it used to work (as shown in this tutorial: https://blog.linotte.dev/eslint-9-next-js-935c2b6d0371), so I assume it depends on the versions of certain packages. However, I haven't been able to identify a set of working package versions.

[iclanton]

Looks like eslint-config-next is pulling in @rushstack/eslint-patch/modern-module-resolution internally. Something probably changed in a minor version of ESLint. We don't explicitly support flat ESLint configs yet, although it may work in some cases.

@D4N14L, if you have some time would you mind taking a look at this? We could start by putting together a build-tests/eslint-9-test project in this repo and working through issues. It's probably also time to start exploring explicitly supporting flat config for the bulk suppressions patch (the modern-module-resolution patch isn't necessary in a flat config).

[kms0219kms]

Same issue here. I am using eslint ^9.18.0. For the workaround, what should I do?

[sd44]

Same issue

[jeanccoelho]

same error

┌──(xiao㉿Xiaobang)-[~/Documents/Projects/JGR/frontend]
└─$ yarn lint
yarn run v1.22.22
$ eslint "src/**/*.{js,jsx,ts,tsx}"

Oops! Something went wrong! :(

ESLint: 9.20.1

Error: Failed to patch ESLint because the calling module was not recognized.
If you are using a newer ESLint version that may be unsupported, please create a GitHub issue:
https://github.com/microsoft/rushstack/issues
at Object. (/home/xiao/Documents/Projects/JGR/frontend/node_modules/@rushstack/eslint-patch/lib/_patch-base.js:167:19)
at Module._compile (node:internal/modules/cjs/loader:1368:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
at Module.load (node:internal/modules/cjs/loader:1205:32)
at Module._load (node:internal/modules/cjs/loader:1021:12)
at Module.require (node:internal/modules/cjs/loader:1230:19)
at require (node:internal/modules/helpers:179:18)
at Object. (/home/xiao/Documents/Projects/JGR/frontend/node_modules/@rushstack/eslint-patch/lib/modern-module-resolution.js:11:23)
at Module._compile (node:internal/modules/cjs/loader:1368:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.