Babel-eslint: Flow types reported as unused in function params with destructuring

[rahulthewall]

Yes, for some reason, I have the same issue as #236.

Here's the relevant bit of source code

import type {Props} from './';

const AppointmentInfoListItem = ({id, state, vehicleName, appointmentAt, cancelled}: Props) => (
  <div />
);

And the definition of Props

export type Props = {
  t: TFunction,
  appointment: Appointment,
  appointmentAt: string,
  id: string,
  state: string,
  vehicleName: string,
  cancelled: string,
};

My eslintrc

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended",
    "plugin:lodash-fp/recommended",
    "plugin:jsx-control-statements/recommended",
    "eslint-config-prettier"
  ],
  "plugins": [
    "flowtype",
    "lodash-fp",
    "redux-saga",
    "jsx-control-statements",
    "graphql",
    "babel",
    "eslint-plugin-prettier"
  ],
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "import/no-extraneous-dependencies": ["error", { "devDependencies": ["**/*.config.js", "**/*.test.js"] }],
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": 0,
    "jsx-control-statements/jsx-use-if-tag": 0,
    "jsx-control-statements/jsx-jcs-no-undef": 0,
    "comma-dangle": [
      "error",
      "always-multiline"
    ],
    "no-use-before-define": 0,
    "no-underscore-dangle": 0,
    "object-curly-spacing": 0,
    "babel/object-curly-spacing": [
      0,
      "never"
    ],
    "class-methods-use-this": 0,
    "import/prefer-default-export": 0,
    "react/require-default-props": 0,
    "react/no-unused-prop-types": 0,
    "flowtype/no-dupe-keys": 2,
    "flowtype/no-primitive-constructor-types": 2,
    "flowtype/no-types-missing-file-annotation": 1,
    "flowtype/no-weak-types": [2, {
        "any": false,
        "Object": false
    }],
    "flowtype/use-flow-type": 1,
    "react/prop-types": 0,
    "react/jsx-no-undef": 0,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "bracketSpacing": false,
        "printWidth": 100,
        "semi": true
      }
    ],
    "react/sort-comp": [
      0,
      {
        "order": [
          "static-methods",
          "lifecycle",
          "everything-else",
          "render"
        ],
        "groups": {
          "lifecycle": [
            "displayName",
            "contextTypes",
            "childContextTypes",
            "mixins",
            "statics",
            "props",
            "defaultProps",
            "state",
            "constructor",
            "getDefaultProps",
            "getInitialState",
            "getChildContext",
            "componentWillMount",
            "componentDidMount",
            "componentWillReceiveProps",
            "shouldComponentUpdate",
            "componentWillUpdate",
            "componentDidUpdate",
            "componentWillUnmount"
          ]
        }
      }
    ]
  }
}

Could someone please tell me what I am doing wrong?

[rahulthewall]

Downgrading to babel-eslint-7.1.1 seems to have solved the issue for me. Was a regression introduced in a later version?

[jamestowers]

7.2.1 works for me but >7.2.1 does not

It seems any version higher than 7.2.1 causes eslint to return multiple Flow related errors including:

error  'ERROR_TYPE' is defined but never used               no-unused-vars
error  'ERROR_TYPE' is already declared in the upper scope  no-shadow

Setting "babel-eslint": "7.2.1" in package.json then running yarn cache clean and yarn fixed it for me

[etienne-bondot]

Any news on this ? I'm facing the same issue. Regards.

[gianpaj]

same thing with babel-eslint": "^8.2.5"

e.g.

_renderItem = ({ item }: { item: Notification }) => {
  console.log(item);
}

[eslint] 'item' PropType is defined but prop is never used (react/no-unused-prop-types)

[davidpmccormick]

Rolling back to 7.2.1 works for me. But obviously would rather not have to do this.

[linstantnoodles]

Having this issue as well

[amardeepranu]

Same issue here

[divyanshu013]

As a temporary workaround, destructure inside function:

const MyComponent = (props: { ids: string[] }) => {
  const { ids } = props;
  ...
}

[kaicataldo]

Thank you for the issue. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.