[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.