Failed to load `eslint.config.js` when shareable config uses `@rushstack/eslint-patch`

[r34son]

trafficstars

eslint.config.mjs:

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import js from '@eslint/js';
import { fixupConfigRules, includeIgnoreFile } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});
const gitignorePath = path.resolve(__dirname, '.gitignore');

/** @type { import("eslint").Linter.FlatConfig[] } */
export default [
  includeIgnoreFile(gitignorePath),
  ...fixupConfigRules(
    compat.extends('next/core-web-vitals'),
  ),
];

Full error

Failed to load eslint.config.js
Error: Cannot read config file: /Users/seitasanov/ownProjects/profile/node_modules/.pnpm/[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/seitasanov/ownProjects/profile/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/eslint-config-next/core-web-vitals.js

[voxpelli]

Can you make a more minimal reproduction of the issue?

[kachkaev]

@voxpelli I can observe this issue in the latest Config Inspector (0.5.5) when creating a new Next.js project (15.0.1). Versions below are pinned for reproducibility:

cd /tmp

npx [email protected] --use-npm --yes config-inspector-issue-70
cd config-inspector-issue-70

npx @eslint/migrate-config .eslintrc.json
npm install @eslint/js @eslint/eslintrc -D
rm .eslintrc.json

npm install

npx @eslint/[email protected]

ℹ Starting ESLint config inspector at http://localhost:7777 

ℹ Reading ESLint config from /private/tmp/config-inspector-issue-70/eslint.config.mjs
Failed to load `eslint.config.js`.
Note that `@eslint/config-inspector` only works with the flat config format:
https://eslint.org/docs/latest/use/configure/configuration-files-new
Error: Cannot read config file: /private/tmp/config-inspector-issue-70/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: /private/tmp/config-inspector-issue-70/node_modules/eslint-config-next/core-web-vitals.js
    at Object.<anonymous> (/private/tmp/config-inspector-issue-70/node_modules/@rushstack/eslint-patch/lib/_patch-base.js:167:19)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/private/tmp/config-inspector-issue-70/node_modules/@rushstack/eslint-patch/lib/modern-module-resolution.js:11:23)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)

Must be this line: https://github.com/vercel/next.js/blob/655b808c5b352350fe85c0fadc7b92ff251e675b/packages/eslint-config-next/index.js#L53

[J4v4Scr1pt]

Same issue here NextJs 15.1.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.

[rrmesquita]

Any updates on this? The config inspector is still not working with Next.js.

[kachkaev]

@rrmesquita try using @next/eslint-plugin-next instead of eslint-config-next. The config package is a wrapper around the plugin.

// ...
import eslintPluginNext from "@next/eslint-plugin-next";
// ...

export default [
  // ...

  {
    plugins: {
      "@next/next": eslintPluginNext,
    },
    rules: {
      ...eslintPluginNext.configs.recommended.rules,
      ...eslintPluginNext.configs["core-web-vitals"].rules,

      // ... local rule overrides ...
    },
  },

  // ...
];

This fixes npx @eslint/config-inspector@latest for me:

[rrmesquita]

@kachkaev thank you so much!

Because I'm using typescript I had to also copy the TS setup from eslint-config-next but it looks like it's working. Here's the final relevant config:

import next from '@next/eslint-plugin-next'
import { defineConfig } from 'eslint/config'
import tseslint from 'typescript-eslint'

export default defineConfig({
  name: 'next',
  extends: [tseslint.configs.recommended],
  plugins: {
    '@next/next': next,
  },
  rules: {
    ...next.configs['recommended'].rules,
    ...next.configs['core-web-vitals'].rules,
    '@typescript-eslint/no-unused-vars': 'warn',
    '@typescript-eslint/no-unused-expressions': 'warn',
  },
})

[antfu]

I believe @rushstack/eslint-patch is not designed for flat config and should not be used in eslint.config.js - it's not the issue on the inspector, please report to upstreams.