Eslint-plugin-react: react/prop-types breaks with spread syntax

[niksajanjic]

static propTypes = {
  unusedProp: PropTypes.object.isRequired,
  usedProp: PropTypes.func.isRequired,
};

In this case, if I'm defining two props out of which I'm not using the first one inside component I'm getting:

'unusedProp' PropType is defined but prop is never used

which is correct. But if I define something in these lines:

static propTypes = {
  ...someMoreProps,
  unusedProp: PropTypes.object.isRequired,
  usedProp: PropTypes.func.isRequired,
};

I'm not going to get the error and I should. I'm still not using 'unusedProp' anywhere inside component and I'm not getting the error now that I have defined spread operator.

If anyone is asking why do I have these 'someMoreProps' rest syntax that is really common with some modules like redux-form. This is HOC component that one uses to wrap it's own component to add form validation. Module exports large number of props that nobody likes to write every single time so you just import them from module and add inside your propTypes as spread operator:

import { reduxForm, propTypes } from 'redux-form';

static propTypes = {
  ....propTypes,
  unusedProp: PropTypes.object.isRequired,
  usedProp: PropTypes.func.isRequired,
};

If I'm seeing this correctly, there shouldn't be an error that some prop is not defined as it may be inside rest operator, but it should still error out for those defined outside spread operator which are not used in the app which isn't happening in our case.

[mturley]

Anything new on this? I am hitting it too.

[mturley]

Never mind-- I was doing something dumb and reassigning my propTypes object wrongly when wrapping a higher order component. With that removed, spread syntax works fine in propTypes now.

[ljharb]

@mturley could you provide the code that was "wrong"? the rule shouldn't crash under any circumstances.

[MtthsB]

I'm still having issues with the linter not properly acting upon a component importing proptypes and their default values from a separate file. We're working on a component library where specific props are considered default, and are therefore spread into the various components' propType and defaultProps declarations.

Assume you have a functional component:

import PropType from 'prop-types'
import ComponentWithDefaultPropDefinitions from 'somewhere'
/* The above is just a functional component with its defaultProps and propTypes declared */

const Example = ({ propA, propB, propC }) => {}

Example.defaultProps = {
   ...ComponentWithDefaultPropDefinitions.defaultProps
}

Example.propTypes = {
   ...ComponentWithDefaultPropDefinitions.propTypes
   propC: PropType.string
}

A few problems occur:
1_ Unless I comment out the imported ...ComponentWithDefaultPropDefinitions.defaultProps in the component's defaultProps definition, it won't throw the error that propC has no default value despite not being required
2_ The same happens when I initiate its default value in the argument list (propC = 'default', for example)
3_ If I comment out the imported ...ComponentWithDefaultPropDefinitions.defaultProps, it won't throw an error for not providing the approriate propType values for the imported propTypes. I guess that's normal and intersects with the problems identified in the first two points.

Is this expected behaviour?

This issue relates to:
_ https://stackoverflow.com/questions/46705199/react-proptypes-do-not-work-properly-when-defining-proptypes-with-spread-o
_ https://github.com/yannickcr/eslint-plugin-react/issues/2195

[ljharb]

Yes, this is expected behavior; if you do any spreading, the linter can't know anything about what's missing, so it just assumes you've specified every prop.

[MtthsB]

Oh, ok!

It's not the answer I was hoping for, but it is the answer I expected. Nevertheless, thanks for the clarification!

[ljharb]

@MtthsB what i would suggest is using https://npmjs.com/prop-types-exact on every component, and then making propType warnings fail your tests - that way you'll get a runtime warning if you forget one.