Eslint-plugin-react: forbid-prop-types warning shown on Yup validation

Created on 21 Jul 2020  路  3Comments  路  Source: yannickcr/eslint-plugin-react

Hey there, a project I work on uses both prop-types and Yup which have a similar syntax.

The following where I'm declaring a Yup validation object:

const formValidation = Yup.object().shape({
    name: Yup.string(),
    customer_ids: Yup.array()
});

Gives me a warning on the line customer_ids: Yup.array() like so:

Prop type `array` is forbidden eslint(react/forbid-prop-types)

I believe this is a bug as this is not a prop type declaration.

bug help wanted

Most helpful comment

Working on this

All 3 comments

This should only warn when object/array/etc is chained off of React.PropTypes or an import/require of the prop-types package.

Working on this

I have the same problem with this declaration

const validation = yup.object().shape({
  address: yup.object({
    city: yup.string(),
    zip: yup.string(),
  }) 
})

I found the problem started form version 7.20.1, in particular with this commit. From what I understand, it checks recursively for the propTypes definition to be correct. I tried to fix it adding toCallExpression in lib/rules/forbid-prop-types.js a check for the parent to be a propTypes declaration using propsUtil.isPropTypesDeclaration but it works only for the direct children of PropTypes and breaks the recursive behavior.

Maybe I should block the recursive calls in another point?

Was this page helpful?
0 / 5 - 0 ratings