#eslint

1 messages · Page 1 of 1 (latest)

forest seal
#

Hey, I am receiving this error:
TypeError: Missing parameter 'recommendedConfig' in FlatCompat constructor.

This is my eslint config:

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

const compat = new FlatCompat({
    // import.meta.dirname is available after Node.js v20.11.0
    baseDirectory: import.meta.dirname,
    // recommendedConfig: {
    //     root: true,
    //     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
    //     parser: '@typescript-eslint/parser',
    //     parserOptions: { project: ['./tsconfig.json'] },
    //     plugins: ['@typescript-eslint'],
    //     ignorePatterns: ['node_modules', '.next', '.vercel', 'public'],
    // },
});

const eslintConfig = [
    ...compat.config({
        extends: [
            'next',
            'next/core-web-vitals',
            'next/typescript',
            'plugin:react/recommended',
            'eslint:recommended',
            'plugin:react-hooks/recommended',
        ],
        rules: {
            '@next/next/no-html-link-for-pages': 'off',
            '@next/next/no-img-element': 'off',
            'react/no-unescaped-entities': 'off',
            '@next/next/no-page-custom-font': 'off',
            '@typescript-eslint/no-explicit-any': 'off',
            'react-hooks/rules-of-hooks': 'error',
            'react-hooks/exhaustive-deps': 'warn',
        },
        plugins: ['react', 'react-hooks'],
    }),
];

export default eslintConfig;

How to fix this?

arctic sunBOT
#

Hi @forest seal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error you're encountering is related to the missing recommendedConfig parameter in your FlatCompat constructor when using ESLint with Next.js in flat config format.

To fix this issue, you need to modify your ESLint configuration. Based on the knowledge sources, there are a couple of approaches you can take:

Option 1: Use the recommended pattern from Next.js

import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
  recommendedConfig: js.configs.recommended
});

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

export default eslintConfig;

This approach is based on the pattern used in Next.js v15 with ESLint v9 support.

Option 2: Use compat.extends instead of compat.config

import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
  recommendedConfig: js.configs.recommended
});

const eslintConfig = [
  ...compat.extends(
    'next',
    'next/core-web-vitals',
    'next/typescript',
    'plugin:react/recommended',
    'eslint:recommended',
    'plugin:react-hooks/recommended'
  ),
  {
    rules: {
      '@next/next/no-html-link-for-pages': 'off',
      '@next/next/no-img-element': 'off',
      'react/no-unescaped-entities': 'off',
      '@next/next/no-page-custom-font': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    },
    plugins: {
      'react': react,
      'react-hooks': reactHooks,
    }
  }
];

export default eslintConfig;

Note that you'll need to import the plugins at the top of your file:

# 
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

The key issue in your current configuration is that you're missing the recommendedConfig parameter in the FlatCompat constructor, which is required when using ESLint v9 with flat config format. You'll need to install @eslint/js to provide this parameter.

If you're still having issues, you might want to check the ESLint Plugin page for more information on configuring ESLint in your Next.js project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: