ESLint 9.2.0 reports "is defined but never used" when used with eslint-plugin-react package.

[andrewplummer]

Environment

Node version: 20.12.2 npm version: 10.5.0 Local ESLint version: 9.2.0 Global ESLint version: none Operating System: OSX 14.4.1

What parser are you using?

Default (Espree)

What did you do?

With the following setup:

// package.json
{
  "name": "eslint-test",
  "type": "module",
  "license": "MIT",
  "scripts": {
    "lint": "eslint"
  },
  "devDependencies": {
    "react": "^18.3.1"
  },
  "dependencies": {
    "eslint": "^9.2.0",
    "eslint-plugin-react": "^7.34.1"
  }
}

// src/Button.jsx
import Foo from './Foo';

export default function Button() {
  return <Foo />;
}

// src/Foo.jsx
export default function Foo() {
  return <div />;
}

import js from '@eslint/js';
import react from 'eslint-plugin-react';

export default [
  {
    files: ['**/*.{js,jsx}'],
    plugins: {
      react,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      // Disabled to prevent context errors:
      // https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
      'react/require-render-return': 'off',
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      'react/jsx-no-undef': 'off',
      'react/jsx-uses-vars': 'off',
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];

# Run this
npm run lint src/Button.jsx

What did you expect to happen?

The Foo import was used in the file and so no linting errors should be raised.

What actually happened?

1:8  error  'Foo' is defined but never used  no-unused-vars

Link to Minimal Reproducible Example

https://github.com/andrewplummer/eslint-test

Participation

• [ ] I am willing to submit a pull request for this issue.

Additional comments

In my real application I am using @babel/eslint-parser, however espree seems to have the same issue.

[mdjermanovic]

Hi @andrewplummer, thanks for the issue!

      // Disabled to prevent context errors:
      // https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
      'react/require-render-return': 'off',
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      'react/jsx-no-undef': 'off',
      'react/jsx-uses-vars': 'off',

The no-unused-vars error appears because the react/jsx-uses-vars rule is disabled.

Until eslint-plugin-react provides a version that supports ESLint v9, you can use it with @eslint/compat package and there will be no need to disable rules.

https://eslint.org/blog/2024/05/eslint-compatibility-utilities/

Here's eslint.config.js from your repro repo, updated to use @eslint/compat:

import js from '@eslint/js';
import react from 'eslint-plugin-react';
import { fixupPluginRules } from "@eslint/compat"; // <--

export default [
  {
    files: ['**/*.{js,jsx}'],
    plugins: {
      react: fixupPluginRules(react), // <--
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      'react/require-render-return': 'off',
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      'react/jsx-no-undef': 'off',
      // 'react/jsx-uses-vars': 'off', // <-- no need to disable this rule
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];

[andrewplummer]

Awesome, this works great! Thank you 👍