BUG react/function-component-definition auto fix break the code.

[nathanredblur]

when you try to use eslint --fix to solve the issue related to the rule react/function-component-definition in certain scenarios break the code.

this is the way to reproduce.

having this file

const genX = (symbol) => `the symbol is ${symbol}`;

const IndexPage = () => {
  return (
    <div>
      Hello World.{genX('$')}
    </div>
  )
}

export default IndexPage;

and this eslint config

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ["plugin:react/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    "react/function-component-definition": "error",
    "react/react-in-jsx-scope": "off"
  }
};

you have this output in eslint

/sandbox/pages/index.js
  3:19  error  Function component is not a function declaration  react/function-component-definition

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

and on try to fixe the issue with eslint --fix

your final code is this

const genX = (symbol) => `the symbol is ${symbol}`;

function IndexPage() {
  return (
    <div>
      Hello World.{genX(')}
    </div>
  )
}

export default IndexPage;

the desired result should be

const genX = (symbol) => `the symbol is ${symbol}`;

function IndexPage() {
  return (
    <div>
      Hello World.{genX('$')}
    </div>
  )
}

export default IndexPage;

tested in this sandbox https://codesandbox.io/s/red-smoke-bh8tjw?file=/pages/index.js

[ljharb]

Thanks! Fix incoming.

[romanown]

i have "eslint-plugin-react": "^7.29.2", but error Function component is not a function declaration.
this is
const App: React.FC = () => { return ( <IonApp> </IonApp> ); };

[ljharb]

@romanown this is expected; that's an arrow function, not a function declaration.