[Bug]: 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope

[vaynevayne]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

The eslint rule I just created, react18, actually prompts you to introduce react at the top. This should be the default option, right?
Is this the rule intentional and I need to turn it off manually, or is there a problem with my configuration?

import { fixupConfigRules } from "@eslint/compat";
import pluginJs from '@eslint/js';
import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
import globals from 'globals';
import tseslint from 'typescript-eslint';

export default [
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.jsx'],
    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
  },
  ...fixupConfigRules(pluginReactConfig),
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
]

Expected Behavior

no error

eslint-plugin-react version

7.34.3

eslint version

^9.5.0

node version

v20.14.0

[ljharb]

This is by design - you need to extend the jsx-runtime config, as detailed in the readme here

[GabenGar]

Not sure by which design, since getting started section of ESLint results in this config, so they clearly didn't get the memo:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

export default [
  {files: ["./src/**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

And this instantly throws 'React' must be in scope when using JSX react/react-in-jsx-scope and Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration when applied to code which started off React Remix getting started section (which might or might not be related).
I am glad to know setting up tooling for react is as arcane as when I only started learning web development.

[ljharb]

You’re reading the “flat config” section - read the entire readme from top down, without skipping anything, and you’ll see the section i also linked to directly in the previous comment.

[GabenGar]

The part you link to specifically mentions legacy config which I instantly skipped because I use hot new ESLint 9 flat config. There is also no mention of "extending JSX runtime" in the flat config section.
It mentions "new" "JSX transform from React 17", but it's not obvious what is this to a newcomer which arrived there from the error caused by template config. Not to mention it's hard to ascertain how "new" it is, considering react 17 was released 4 years ago, which is pretty much prehistoric times in javascript land, and in react land might as well be a deprecated legacy bad practice by now. It even predates COVID-19, so it was quite literally released in a different world in a general historic context.
All I am saying a niche plugin for a lib shouldn't require reading a pretty long documentation with a lot of noise just to work at all on a template config.

[ljharb]

A PR to improve the documentation would always be appreciated.

[GabenGar]

This assumes I know the source of the problem or is it the problem with the plugin or misconfiguration on ESLint config template.

[ljharb]

At this point, I'd assume you know :-) the jsx-runtime stuff in the eslintrc section should be repeated in the flat config section.

The number of years is irrelevant; we haven't had a breaking change in well over twice that. If we do, we can change the default, but until then, this is how it has to work.