Configuration for rule "react/function-component-definition" is invalid

[Leo843]

Hi!

Since I added eslint-config-airbnb the project gives me an error when I try to build it.

src/.eslintrc.json » eslint-config-airbnb » /home/project/node_modules/eslint-config-airbnb/rules/react.js:
	Configuration for rule "react/function-component-definition" is invalid:
	Value ["function-declaration","function-expression"] should be equal to one of the allowed values.

Here is my package.json

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "prop-types": "^15.8.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.1",
    "cypress": "^8.6.0",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "yamljs": "^0.3.0"
  }
}

I wanted to post it here first before opening an issue in case it is some dumb mistakes or a known error.

[Leo843]

Ok I found a solution.

I had to upgrade the ESlint package that comes with CRA with the following command.

yarn upgrade --latest react-scripts

[douglaszaltron]

didn't work for me with v5

[implkiennguyen]

didn't work for me

[Yashvi-98]

Did not work for me

[Eirxne]

not work for me

[douglaszaltron]

"eslint-plugin-react": "^7.28.0", is incompatible with react-script v5 =(

use "DISABLE_ESLINT_PLUGIN=true react-scripts build" if you want to work until you have an update to react-script

[yaverm]

The following steps helped me

.eslintrc.json

"rules": {
    "react/function-component-definition": [
        2,
        {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
        }
    ]
}

packege.json

"devDependencies": {
    "eslint-config-airbnb": "^18.2.1", // downgraded version from ^19.0.4
  }

[Max0nyshchenko]

Thank you, that helped me as well

[namlq93]

How can I turn off this rule? I want to use function-declaration or arrow-function both are acceptable.

[hec9527]

正解👍🏻

[ahmadkhanzadeh]

I got the same problem as our friend ( but in April 2023!- react 18) and this way helps me fix the issue. Thanks a lot for your useful solution
. It works properly

[saadazghour]

Thanks, It's helpful 👍

[Sergioamjr]

I only had that to downgrade eslint-config-airbnb from ^19.0.4 to ^18.2.1. It worked for me.

[hypnoboutique]

Further to @yaverm's suggestion

.eslintrc.json

"rules": {
    "react/function-component-definition": [
        'error', // <-------- "2" didn't work for me, for some reason
        {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
        }
    ]
}

[Udaay]

Yeah its working for me , thanks!!

[Eirxne]

.