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

Adding react/prefer-read-only-props rule does not trigger when using React.FC or React.FunctionComponent without importing React.

In modern React, we don't need to import React thanks to the new JSX Transform:

• https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-different-in-the-new-transform

And TypeScript supports this out of the box:

• https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories

So even for React types we don't have to import them. React.FC just works in .tsx files.

But react/prefer-read-only-props fails to identify the component as a React component if we use React.FC or React.FunctionComponent without importing React.

Expected Behavior

This code does NOT error

interface ChipProps { chipColor: string; label: string; } const Chip: React.FC<ChipProps> = ({ chipColor, label }) => { return <div style={{ backgroundColor: chipColor }}>{label}</div>; };

This code does

// This line is added import React from 'react' interface ChipProps { chipColor: string; label: string; } const Chip: React.FC<ChipProps> = ({ chipColor, label }) => { return <div style={{ backgroundColor: chipColor }}>{label}</div>; };

.eslintrc.js

module.exports = { root: true, env: { browser: true, es6: true, es2021: true, }, plugins: ['@typescript-eslint', 'react'], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 2021, sourceType: 'module', }, settings: { react: { version: 'detect', }, }, rules: { 'react/prefer-read-only-props': 'warn', }, };

tsconfig.json

{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "baseUrl": "./", "composite": false, "declaration": false, "declarationMap": false, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "isolatedModules": true, "jsx": "react-jsx", "lib": ["DOM", "DOM.Iterable", "ESNext"], "module": "ESNext", "moduleResolution": "node", "noEmit": true, "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "target": "ES2021", "types": ["node", "@testing-library/jest-dom"], }, "include": ["*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.json"], "exclude": ["node_modules", "build", "storybook-static"] } 

Tried in VS Code and in the command line:

yarn eslint --max-warnings 0 src/components/Chip.tsx

eslint-plugin-react version

7.33.2

eslint version

8.38.0

node version

v16.14.0