'no-unused-prop-types' error with destructured props

[HartiganHM]

I looked through at a few issues but wasn't able to find something that matched this exactly. If there is a duplicate issue, a reference would be great and this one can be closed.

Currently, I'm running into no-unused-prop-types for any props that are not accessed directly, but rather have other properties destructed from them. I'm currently using "eslint-plugin-react": "^7.15.1".

This wasn't happening as of yesterday, when I was using "eslint-plugin-react": "^7.12.4".

If any other details are needed, please let me know!

Example

class Page extends Component {
  static.propsTypes = {
    pageData: object,
  }

  render () {
    const { data, loading } = this.props.pageData;

    if (loading) {
      return 'Loading...'
    }

    return (
      <div>
        {data.map(item => <span>{item.name}</span>}
      </div>
    );
  }
}

[ljharb]

I would expect an error here because data and loading are not specified via PropTypes.shape. What's the exact error you receive?

[HartiganHM]

I was wondering the same, but haven't seen the issue before, so I was unsure. The exact error is this:

'match' PropType is defined but prop is never used               react/no-unused-prop-types

The area of code where the error is occurring is doing the following, though this is only one example of several.

const {
  match: {
    params: { type }
  }
} =this.props

If the solution is to make a more specific PropTypes.shape, that's fine, but since this hasn't been an error for the past ~8 months that we've had this setup, I thought I would raise the issue.

[HartiganHM]

As an update, I tried the below and am still receiving an error:

Error
'match' PropType is defined but prop is never usedeslint(react/no-unused-prop-types)

static propTypes = {
  match: shape({
    params: shape({
      type: string,
    })
  }).isRequired
};

This is our eslintrc.js if this provides any insight:

module.exports = {
  env: {
    browser: true,
    es6: true,
    jasmine: true,
    jest: true,
  },
  extends: 'airbnb',
  globals: {
    $: true,
    $$: true,
    Atomics: 'readonly',
    browser: true,
    SharedArrayBuffer: 'readonly',
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'max-len': 'off',
    'no-plusplus': 'off',
    'react/forbid-prop-types': 'off',
    'implicit-arrow-linebreak': 'off',
    'react/button-has-type': 'off',
    'react/default-props-match-prop-types': 'off',
    'import/no-extraneous-dependencies': 'off',
    'react/destructuring-assignment': [
      'error',
      'always',
      { ignoreClassFields: true },
    ],
    'id-length': ['error', { min: 3, exceptions: ['id', 's3', 'i'] }],
    'import/no-cycle': 'off',
  },
};

As well as other modules that we're using. The application itself was built with CRA:

    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-plugin-flowtype": "^3.4.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",

[ljharb]

Correct, this was a bug fix. These things should always have errored, and we fixed the bug of it not erroring.

[HartiganHM]

Okay, perfect! That's good to know. Given my above comments with the more specific shape that is still erroring, could you suggest or point me toward a possible solution?

[golopot]

The case in example in #2433 (comment) is fixed by #2428.

Can you confirm by npm i https://github.com/yannickcr/eslint-plugin-react?

[HartiganHM]

@golopot Thanks for providing the MR that addressed this false positive. I'm happy to adjust accordingly to be more specific, but the solution I posted in this comment still didn't remedy the error. Is there a way in which you would suggest fixing this error?

I'm also not sure what I would be confirming with npm i https://github.com/yannickcr/eslint-plugin-react, could you clarify?

[golopot]

Since the pr is merged, and npm i that will install the master version of this plugin, and if your issue if solved by the pr, the error should disappear.

[HartiganHM]

Ah, perfect. I can confirm that the error is gone! Thanks for the persistence and follow-up. Any idea of when this will be released if it isn't already?

[ljharb]

Closed by #2328.

It will be released as soon as I can make time to do it.

[HartiganHM]

@ljharb, perfect, I'll watch for releases. Thank you!