The Next.js plugin was not detected in your ESLint configuration and after adding it breaks because has no flat format

[rzimmerdev]

Link to the code that reproduces this issue

https://github.com/divergex/divergex.github.io

To Reproduce

Setup project with next, add Eslint and setup with pnpm create @eslint/config@latest
Then, run next lint

eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
  },
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

gives ⚠ The Next.js plugin was not detected in your ESLint configuration.

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import pluginNext from "@next/eslint-plugin-next";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
  },
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
    pluginNext.configs.recommended,
];

gives Config (unnamed): Key "plugins": This appears to be in eslintrc format (array of strings) rather than flat config format (object).

and pluginNext isn't iterable neither has a flat attribute.

Current vs. Expected behavior

Current behavior is that next lint fails, and expected behaviour obviously is that it should work with the correct format.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Wed Sep 25 07:09:20 UTC 2024 (b87e886)
  Available memory (MB): 31961
  Available CPU cores: 16
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.14.4
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.2
Next.js Config:
  output: export

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

Linting

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

next dev (local)

Additional context

No response

[kachkaev]

I believe that we can use this workaround for now: #71763 (comment). But yeah, it’d be great to see native FlatConfig support in a future Next.js release.

[samcx]

@rzimmerdev Can you clarify if you are just trying to use flat config with Next.js v15? Currently, we do have flat config set up with the latest Create Next App.

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;

[MonstraG]

We hit this warning when folloiwng this setup instead: #49337 (reply in thread)

[kachkaev]

One more thing to note: both @next/eslint-plugin-next and eslint-config-next don’t come with TypeScript definitions (even via DefinitelyTyped). So if eslint.config.js is linted with tsc, imports are typed as any.

Popular ESLint plugins are getting shipped with typings since FlatConfig has become the default. eslint-plugin-react or @stylistic/eslint-plugin can serve as examples.

[mobeigi]

I am not sure if I am missing something but in my project I am trying to use eslint 9 with next but keep getting the warning:
⚠ 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 matter what I do, I cannot get rid of this warning and make it detect the Next.js plugin?

Right now I am using something like:

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

export default tseslint.config(
  globalIgnores,
  eslint.configs.recommended,
  tseslint.configs.recommendedTypeChecked,
  typedLinting,
  ...nextConfig,
  ...typescriptConfig,
  ...prettierConfig,
)

However, I have tried a number of different configurations.

Has anybody gotten this to work without the error showing?