Skip to content

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

Closed
@vaynevayne

Description

@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?

image
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

Activity

ljharb

ljharb commented on Jun 20, 2024

@ljharb
Member

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

GabenGar

GabenGar commented on Sep 13, 2024

@GabenGar
Contributor

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

ljharb commented on Sep 13, 2024

@ljharb
Member

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

GabenGar commented on Sep 13, 2024

@GabenGar
Contributor

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

ljharb commented on Sep 13, 2024

@ljharb
Member

A PR to improve the documentation would always be appreciated.

GabenGar

GabenGar commented on Sep 13, 2024

@GabenGar
Contributor

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

ljharb

ljharb commented on Sep 13, 2024

@ljharb
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ljharb@GabenGar@vaynevayne

        Issue actions

          [Bug]: 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope · Issue #3770 · jsx-eslint/eslint-plugin-react