Eslint 9 : Use @eslint/js and eslint-plugin-react

[Maxou44]

Hello,

I can't get @eslint/js and eslint-plugin-react to work together since ESlint 9.0 update, JSX components are not detected by @eslint/js as used variables and I get a lots of no-unused-vars errors (imported components). I followed migration guide and check eslint-plugin-react documentation but I didn't found the solution. Any ideas ?

import js from '@eslint/js';
import react from 'eslint-plugin-react';
import simpleImportSort from "eslint-plugin-simple-import-sort";
import globals from 'globals';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    ignores: ["out/", "dist/", "node_modules/"],
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    plugins: {
      "simple-import-sort": simpleImportSort,
      react,
    },
    rules: {
      'react/prop-types': 'off',
      "simple-import-sort/imports": ["error", {
        "groups": [
          ["^\\u0000"],
          ["^node:"],
          ["^@?\\w"],
          ["^"],
          ["^\\."],
          ["^.+\\.?(graphql)$"],
          ["^.+\\.?(css)$"]
        ]
      }],
      "simple-import-sort/exports": "error"
    },
  },
];

[aladdin-add]

if using react, you may want to use it's recommended config: https://github.com/jsx-eslint/eslint-plugin-react/tree/master?tab=readme-ov-file#shareable-configs-1