Next.js Discord

Discord Forum

How to ignore some folders from eslint in eslint v9?

Unanswered
Ghostman posted this in #help-forum
Open in Discord
I setup new Next.js project and configured eslint.
I tried to ignore .next folder from eslint check using ignores but it always check .next folder.
Here is my eslint.config.mjs file.
Please help me.

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';
import typescriptEslintParser from '@typescript-eslint/parser';
import typescriptPlugin from '@typescript-eslint/eslint-plugin';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
import prettierPlugin from 'eslint-plugin-prettier';
import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: {
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react/recommended',
      'plugin:react-hooks/recommended',
      'plugin:jsx-a11y/recommended',
      'plugin:prettier/recommended',
    ],
  },
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript', 'next'),
  {
    plugins: {
      '@typescript-eslint': typescriptPlugin,
      react: reactPlugin,
      'react-hooks': reactHooksPlugin,
      'jsx-a11y': jsxA11yPlugin,
      prettier: prettierPlugin,
      'simple-import-sort': simpleImportSortPlugin,
    },
    ignores: [
      '.next',
      'build',
      'dist',
      '.eslint.config.mjs',
      'next.config.ts',
      'node_modules',
    ],
    languageOptions: {
      parser: typescriptEslintParser,
      parserOptions: {
        project: './tsconfig.json',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
...

38 Replies

@Ghostman I setup new Next.js project and configured eslint. I tried to ignore .next folder from eslint check using ignores but it always check .next folder. Here is my eslint.config.mjs file. Please help me. import { dirname } from 'path'; import { fileURLToPath } from 'url'; import { FlatCompat } from '@eslint/eslintrc'; import typescriptEslintParser from '@typescript-eslint/parser'; import typescriptPlugin from '@typescript-eslint/eslint-plugin'; import reactPlugin from 'eslint-plugin-react'; import reactHooksPlugin from 'eslint-plugin-react-hooks'; import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'; import prettierPlugin from 'eslint-plugin-prettier'; import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, recommendedConfig: { extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', ], }, }); const eslintConfig = [ ...compat.extends('next/core-web-vitals', 'next/typescript', 'next'), { plugins: { '@typescript-eslint': typescriptPlugin, react: reactPlugin, 'react-hooks': reactHooksPlugin, 'jsx-a11y': jsxA11yPlugin, prettier: prettierPlugin, 'simple-import-sort': simpleImportSortPlugin, }, ignores: [ '.next', 'build', 'dist', '.eslint.config.mjs', 'next.config.ts', 'node_modules', ], languageOptions: { parser: typescriptEslintParser, parserOptions: { project: './tsconfig.json', ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, }, ...
why do you know it checks .next folder?
I don't know why it checks it
Do you know how to ignore it?
I followed https://eslint.org/docs/latest/use/configure/ignore#ignored-file-warnings but it still checks when I run eslint . --fix
@Ghostman I don't know why it checks it
i don't ask whether you know why, i ask why you know it is checking .next
what is the indicator that told you it is checking .next
I am getting above error
If I remove .next folder manually, the it pass eslint check but if there is .next foler, then eslint checks it and make errors
That why I am thinking it checks .next
oh i see, so it's not what i thought it was...
@Ghostman I setup new Next.js project and configured eslint. I tried to ignore .next folder from eslint check using ignores but it always check .next folder. Here is my eslint.config.mjs file. Please help me. import { dirname } from 'path'; import { fileURLToPath } from 'url'; import { FlatCompat } from '@eslint/eslintrc'; import typescriptEslintParser from '@typescript-eslint/parser'; import typescriptPlugin from '@typescript-eslint/eslint-plugin'; import reactPlugin from 'eslint-plugin-react'; import reactHooksPlugin from 'eslint-plugin-react-hooks'; import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'; import prettierPlugin from 'eslint-plugin-prettier'; import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, recommendedConfig: { extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', ], }, }); const eslintConfig = [ ...compat.extends('next/core-web-vitals', 'next/typescript', 'next'), { plugins: { '@typescript-eslint': typescriptPlugin, react: reactPlugin, 'react-hooks': reactHooksPlugin, 'jsx-a11y': jsxA11yPlugin, prettier: prettierPlugin, 'simple-import-sort': simpleImportSortPlugin, }, ignores: [ '.next', 'build', 'dist', '.eslint.config.mjs', 'next.config.ts', 'node_modules', ], languageOptions: { parser: typescriptEslintParser, parserOptions: { project: './tsconfig.json', ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, }, ...
what if you put .next/ instead of .next?
Yes, I tried it as well
I tried .next, .next/, .next/* but all check it
sanity check, if you run eslint with --ignore-pattern '!.next/' does it work
I am using pnpm. Can you please give me full command for that?
how are you currently running eslint? with a lint script in package.json right?
Yes, right
then jusst pnpm lint --ignore-pattern '!.next/'
When I run pnpm lint, it still getting same error
oh actually sorry there was a typo
remove the !
how does it work now
Okay, let me check
Oh, sorry but it still shows same error
This is my structure
yeah if even with cmd args it still doesn't work, then i have no idea, sorry.

might be a good idea to remove the eslint config and try to create a new eslint config from scratch
How can I create new eslint config?
I just updated next project inital eslint
i can only give you this https://eslint.org/docs/latest/use/getting-started, ive never created a new eslint v9 config myself, i just use the v8 config that works for me, or use biome
Okay, thanks
Korat
@Ghostman I had exacly the same problem as you. Always add ignores on top or bottom of the eslint config file. You can check out my nextjs boilerplate with eslint v9 and prettier configured. I make it work without extra @eslint/eslintrc dependency.

https://github.com/OreQr/next-clean-boilerplate/blob/main/eslint.config.mjs
not sure if it's a bug at this point
@Blue whiting @Korat
I solved that problem by including gitIgnore into eslint.config.mjs
I am not sure if this can help you. (code part attached)


import { dirname, resolve } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';
import { includeIgnoreFile } from '@eslint/compat';
import typescriptEslintParser from '@typescript-eslint/parser';
import typescriptPlugin from '@typescript-eslint/eslint-plugin';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
import prettierPlugin from 'eslint-plugin-prettier';
import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const nextIgnore = resolve(__dirname, '.gitignore');

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: {
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react/recommended',
      'plugin:react-hooks/recommended',
      'plugin:jsx-a11y/recommended',
      'plugin:prettier/recommended',
    ],
  },
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript', 'next'),
  includeIgnoreFile(nextIgnore), // Add this line to include git ignore content into eslint ignore 
  {
    plugins: {
...
...