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

[stackerito]

I tried to follow the docs as best as possible, but now when I run npm run build I get the following message:

warn - The Next.js plugin was not detected in your ESLint
configuration. See
https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

This is the package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^11.1.0",
    "autoprefixer": "^10.2.6",
    "eslint": "^7.32.0",
    "eslint-config-next": "11.1.0",
    "eslint-plugin-react": "^7.24.0",
    "postcss": "^8.3.5",
    "tailwindcss": "^2.2.4"
  }
}

This is the .eslintrc.json:

{
  "extends": "next/core-web-vitals"
}

This is .eslinrc.js:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

Do you see anything wrong here?

[thibautsabot]

Hello !
I don't think you need both .eslintrc.json and .eslinrc.js.
In fact it might be the root cause of your issue.

The second file seems to override the first.

If you get rid of .eslintrc.json to only keep .eslinrc.js and add the next plugin at the end like :

"env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
      	"next/core-web-vitals"
    ],
 ...

it should fix your problem.

[stackerito]

Thank you, that worked!

[beatrixbee]

Thanks you very much

[teetangh]

.eslintrc.* is now deprecated in favour of eslint.config.(js|mjs|......)

[qwikag]

Can I ask that the above answer be fixed to include the correct file naming; and the file locations of these config files?
I need this answer but it does not provide enough info when I do not have these files in the first place, yet I have the same error.

[golddydev]

I see

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

this warning when I run pnpm run lint on my monorepo.

root
|----web-app

web-app is next.js application with next 15.3.3

Here is the repo link
https://github.com/masumi-network/sokosumi/blob/main/web-app/eslint.config.mjs

[golddydev]

This is my eslint.config.mjs

import { FlatCompat } from "@eslint/eslintrc";

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
  recommendedConfig: {
    extends: ["eslint:recommended", "plugin:react/recommended"],
  },
});

const eslintConfig = [
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript", "prettier"],
    plugins: [
      "simple-import-sort",
      "import",
      "prettier",
      "unused-imports",
      "no-relative-import-paths",
    ],
    ignorePatterns: [
      "**/dist/**",
      "**/build/**",
      "**/coverage/**",
      "src/components/ui/**",
      "src/lib/api/generated/**",
      "public/js/**/*.js",
      "*.config.mjs",
    ],
    parserOptions: {
      sourceType: "module",
      ecmaVersion: "latest",
      project: "./tsconfig.json",
      tsconfigRootDir: import.meta.dirname,
    },
  }),
];

export default eslintConfig;

[leandroluk]

I'm using the new eslint way to configure project without use FlatCompat like this:

import pluginNext from "@next/eslint-plugin-next";
import pluginReact from "eslint-plugin-react";
import pluginReactHooks from "eslint-plugin-react-hooks";
import globals from "globals";
import tseslint from "typescript-eslint";
import baseConfig from "./base.js";
import jestConfig from "./jest.js";

/** @type {import("eslint").Linter.Config[]} */
const nextConfig = [
  {
    ...baseConfig,
    name: "next",
    languageOptions: {
      ...baseConfig.languageOptions,
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.es2024,
        ...globals.jest,
      },
    },
    plugins: {
      ...baseConfig.plugins,
      "react": pluginReact,
      "react-hooks": pluginReactHooks,
      "@next/next": pluginNext,
    },
    rules: {
      ...tseslint.configs.recommended.reduce((obj, {rules}) => ({...obj, ...rules}), {}),
      ...pluginReact.configs.flat.recommended.rules,
      ...pluginReactHooks.configs.recommended.rules,
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs["core-web-vitals"].rules,
      "react/react-in-jsx-scope": "off",
    },
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  jestConfig,
];

export default nextConfig;

It works without problems, but the warning remains in the terminal. Is there any way to hide this warning since I am indeed importing the plugin but in a different way?