Next.js Discord

Discord Forum

How to use eslint-plugin-react-hooks@6.0.0-rc.1 in eslint.config.mjs ? React Compiler linting.

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Since eslint-plugin-react-compiler was merged into eslint-plugin-react-hooks how can I support the React Compiler linting in my project and use eslint-plugin-react-hooks@6.0.0-rc.1 in the config? I tried many things and asking different AIs by passing the Next.js Eslint docs, but with no luck. What I have is the default config:
import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

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;


but I keep getting:
ESLint configuration in  » eslint-config-next/core-web-vitals » D:\Projects\next-saas\node_modules\eslint-config-next\index.js » plugin:react-hooks/recommended is invalid:
        - Unexpected top-level property "name".

Referenced from: D:\Projects\next-saas\node_modules\eslint-config-next\index.js
error: script "lint" exited with code 1


with for example:
import { FlatCompat } from '@eslint/eslintrc';
import * as reactHooks from 'eslint-plugin-react-hooks';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

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

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

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

export default eslintConfig;

1 Reply

Masai LionOP
I will stick with eslint-plugin-react-compiler for now, seems like installing the eslint-plugin-react-hooks@rc dependency breaks it, this seems to work:
import { FlatCompat } from '@eslint/eslintrc';
import reactCompiler from 'eslint-plugin-react-compiler';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

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'), reactCompiler.configs.recommended];

export default eslintConfig;