no-typos rule doesn't handle custom proptypes classes

[modosc]

with the 7.2.1 -> 7.3.0 upgrade this rule started breaking on this code:

import * as MyPropTypes from 'lib/my-prop-types'

const Foo = ({ bar } = {} ) => <div className={bar} />

Foo.propTypes = {
  bar: MyPropTypes.bar.isRequired
}

with

  29:25  error  Typo in declared prop type: bar  react/no-typos

interestingly enough if i change to this:

Foo.propTypes = {
  bar: MyPropTypes.string.isRequired
}

then the rule passes, even though MyPropTypes doesn't export a string prop.

[jseminck]

Just for information, indeed we added logic to validate the specific PropTypes. Since string is a key that is exported from the official prop-types package, it doesn't fail. bar is not a prop type defined in the official prop-types package, so it fails.

Not sure how we should handle this case yet. Just explaining what changes and why the error is introduced. 😄

[ljharb]

This seems like a bug in no-typos - we should only be looking for typos on React.PropTypes or on an import/require of prop-types.

[jseminck]

I'm trying to work on this... I guess we need to support the following cases? Did I miss anything?

import PropTypes from "prop-types"

import { PropTypes } from "react";

import { PropTypes as ValidPropTypes } from "react"

import React from "react"
React.PropTypes

[ljharb]

@jseminck also require('prop-types') in any form.

[martin-svk]

It also fails when importing specific prop types directly:

import { func, number } from 'prop-types';

MyComponent.propTypes = {
    funcProp: func.isRequired,
    numberProp: number.isRequired
};

Resulting in react/no-typos Error.

[oieduardorabelo]

same happens when using react-intl inject hoc:

import { injectIntl, intlShape } from "react-intl";

function Example() { //code }

Example.propTypes = {
  // ESLint error: 'Typo in declared prop type: isRequired (react/no-typos)'
  intl: intlShape.isRequired
};

export default injectIntl(Example)

you can ignore the line number in the screenshot, is just an example

[felpin]

Well, this does not resolve the issue, but you can disable a rule in ESLint with a comment

Foo.propTypes = {
  // eslint-disable-next-line react/no-typos
  bar: MyPropTypes.string.isRequired
}

In this particular case I do that while this issue is open

[neiker]

Same using react-immutable-proptypes

[zxlin]

@jseminck

Another case where webpack's ProvidePlugin is used to avoid repetitively importing prop-types everywhere.

In my code I don't import prop-types explicitly and simply write:

const { string, object } = PropTypes;

and get the validators that way as webpack will replace all instances of PropTypes with the prop-types module.