babel-plugin-check-prop-types

Babel plugin to typecheck React components with legacy PropTypes compatible with React 19.

Works with Function (including Arrow Function) and Class (including @decorated) components, React or Redux reducers.

Supports defining extend class name regular expression pattern with classNameMatcher (unset by default).

Supports debugging skipped components with logIgnoredBinding or logIgnoredClass boolean options (enabled by default).

Supports dropping propTypes from production bundle with dropPropTypes boolean option, same way as babel-plugin-transform-react-remove-prop-types does (disabled by default).

Examples

Input:

function FunctionComponent() {}
FunctionComponent.propTypes = {};

const ArrowFunctionComponent = () => {};
ArrowFunctionComponent.propTypes = {};

class ClassComponent extends React.PureComponent {
  render() {} // render method required to validate class components
}
ClassComponent.propTypes = {};

const AnonymousFunction = function () {};
AnonymousFunction.displayName = "MyComponent";
AnonymousFunction.propTypes = {};

Output:

import _checkPropTypes from "prop-types/checkPropTypes";

function FunctionComponent() {
  _checkPropTypes(FunctionComponent.propTypes, arguments[0], "prop",
    FunctionComponent.displayName || "FunctionComponent");
}
FunctionComponent.propTypes = {};

const ArrowFunctionComponent = _props => {
  _checkPropTypes(ArrowFunctionComponent.propTypes, _props, "prop",
    ArrowFunctionComponent.displayName || "ArrowFunctionComponent");
};
ArrowFunctionComponent.propTypes = {};

class ClassComponent extends React.PureComponent {
  render() {
    _checkPropTypes(this.constructor.propTypes, this.props, "prop",
      ClassComponent.displayName || "ClassComponent");
  }
}
ClassComponent.propTypes = {};

const AnonymousFunction = function () {
  _checkPropTypes(AnonymousFunction.propTypes, arguments[0], "prop",
    AnonymousFunction.displayName || "AnonymousFunction");
};
AnonymousFunction.displayName = "MyComponent";
AnonymousFunction.propTypes = {};

In addition you can typecheck reducers (actually first argument of everything what looks like function):

import { useReducer } from "react";
import { createStore } from "redux";

function counter(state, action) {
  if (action.type === "INCREMENT") return state + 1;
  if (action.type === "DECREMENT") return state - 1;
  return state;
}
counter.propTypes = PropTypes.number.isRequired;

const ReactComponent = () => {
  const [state, dispatch] = useReducer(counter, 0);
};

const reduxStore = createStore(counter, 0);

See tests for more examples.

Dependencies

Update react-is dependency for prop-types (otherwise you’ll get validation errors for PropTypes.node or PropTypes.element).

With NPM overrides:

{
  "dependencies": {
    "prop-types": "15.8.1"
  },
  "overrides": {
    "prop-types/react-is": "19.0.0"
  }
}

With Yarn resolutions:

{
  "dependencies": {
    "prop-types": "15.8.1"
  },
  "resolutions": {
    "prop-types/react-is": "19.0.0"
  }
}

Ensure that updated version matches your React's react-dom dependency version.

Usage

Install plugin package:

yarn add --dev babel-plugin-check-prop-types

Update Babel configuration:

export default () => {
  const plugins = [];

  if (process.env.NODE_ENV !== "production") { // enable plugin only for non-production bundle
    plugins.push(["babel-plugin-check-prop-types", {
      // classNameMatcher: /^UI\.(.+)/,
      // logIgnoredBinding: false,
      // logIgnoredClass: false,
      // dropPropTypes: false,
    }]);
  }

  return { plugins };
};