Eslint-plugin-react: ESLint cannot find errors connected with react prop-types when using mobX decorators with stateless components

[Kirill-Cherkalov]

Tell us about your environment

• ESLint Version: 5.16.0
• Node Version: 10.15.0
• npm Version: 6.4.1

What parser (default, Babel-ESLint, etc.) are you using?

Please show your full configuration:

Configuration

package.json

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "lint": "eslint **/*.js",
    "precommit": "lint-staged",
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  },
  "rnpm": {
    "assets": [
      "src/resources/fonts"
    ]
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.3.4",
    "axios": "^0.18.0",
    "axios-mock-adapter": "^1.16.0",
    "final-form": "^4.12.0",
    "mobx": "^4.9.4",
    "mobx-react": "^5.4.3",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-final-form": "^4.1.0",
    "react-native": "0.59.5",
    "react-native-config": "^0.11.7",
    "react-native-navigation": "^2.18.4",
    "react-native-paper": "^2.15.2",
    "react-native-vector-icons": "^6.4.2",
    "styled-components": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-native": "^3.7.0",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.54.0",
    "mobx-remotedev": "^0.3.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

.eslintrc.json

{
    "extends": "airbnb",
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "jest": true
    },
    "plugins": [
      "import",
      "jsx-a11y",
      "react",
      "react-native"
    ],
    "rules": {
      "import/extensions": "off",
      "import/no-extraneous-dependencies": "off",
      "import/no-unresolved": "off",
      "linebreak-style": "off"
    }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

const SideMenu = observer(
  ({ componentId }) => (
    <S.Container>
      <S.Head />
      <UserInfo />
      <Separator />
      <MenuList componentId={componentId} />
    </S.Container>
  ),
);

eslint **/*.js

What did you expect to happen? - That componentId is missing in props validation

What actually happened? Please include the actual, raw output from ESLint. Nothing happens. Сode passes verification successfully

yarn run v1.12.3
$ eslint **/*.js

<rootFolder>\src\modules\Main\UserInfo\Form\index.js
  10:28  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

Done in 9.38s.

Are you willing to submit a pull request to fix this bug? - No

[ljharb]

This means our component detection isn’t finding it, which could perhaps be fixed.

[ljharb]

cc @alexzherdev

[Kirill-Cherkalov]

@ljharb Guys, some updates?

[jzabala]

@ljharb I think we should handle this case through settings. Something like an array of componentCreatorFunctions because otherwise there is not much difference between:

const SideMenu = observer(
  ({ componentId }) => (
    <S.Container>
      <S.Head />
      <UserInfo />
      <Separator />
      <MenuList componentId={componentId} />
    </S.Container>
  ),
);

map(
  ({ componentId }) => (
    <S.Container>
      <S.Head />
      <UserInfo />
      <Separator />
      <MenuList componentId={componentId} />
    </S.Container>
  ),
);

Both are function returning jsx whose parent is a CallExpression.

Or we could consider every function whose parent is a CallExpression and, the parent of that a VariableDeclarator and, the name of the variable start with a uppercase letter a component.

[ljharb]

Given that we have propWrapperFunctions, I suppose we could create a componentWrapperFunctions - it'd have to default to including things like <pragma>.forwardRef, etc, so it'd be a bit more complex.