How to prevent building app if component prop types are invalid?

Question

Here is a example for PropTypes:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Now I use Greeting component as:

<Greetings otherProp="this is a invalid prop" />

In this case, when I build app for deployment, no error is thrown & app is successfully built. But it give error in runtime & breaks down.

How can I add check to remove this problem & ensure no components are being built using wrong prop types.

Answer 1

Your question arises from a misunderstanding of both the intent and implementation of PropTypes. PropTypes exists to provide configurable run-time validations of API usage. It does not perform static code analysis but rather validates usage at runtime.

To provide additional context, the concept predates the mainstream usage of many static analysis tools. Furthermore, even with the introduction of these tools, some prefer runtime validation approaches. One reason for this could be to retain tool chain simplicity. PropTypes validation works in vanilla JavaScript without any additional tools or languages. However, since you are using JSX, and therefore already have a complex tool chain that involves multiple languages, this consideration is less relevant. However, another reason to use PropTypes is, if you are building a library, you can still provide a level of validation to your consumers without requiring them to use the same, or for that matter any, of the static analysis tools you've chosen.

If you want to validate the correctness of your code before running it, you should use a static analysis tool. There are many options, and you may use multiple tools, but some examples include TypeScript, Flow, and Closure Compiler.

Note that any of these static analysis options are, by definition, orthogonal to PropTypes and so may be used together with them freely. Therefore, I'm not suggesting that you abandon the use of PropTypes, but rather that you add a static analysis tool that caters to your use case.

Answer 2

My personal recommendation is using a static code analysis tool as Aluan Haddad mentioned.

If you don't want to use a static code analysis tool, you could try to make the code fail on tests using a tool like https://github.com/esphen/jest-prop-type-error. But this implies you should have tests covering the integration between different components completely.

I would not consider this as a final solution for this problem but could be helpful as a temporary solution for large codebases while migrating to a static code analysis tool.