react/forbid-foreign-prop-types

Disallow reading the propTypes of another component

Many production builds strip propTypes from components to save bytes. Code that reads Button.propTypes then gets undefined, so it works in development and breaks in production.

The rule reports every read of a .propTypes property, including destructuring it. Assigning to propTypes is fine. To share prop types between components, export them as a plain object.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/forbid-foreign-prop-types" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/forbid-foreign-prop-types" = ["error", {
  allowInPropTypes = false,
}]

Examples#

example.jsx1 problem
import Button from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...Button.propTypes,
  icon: PropTypes.string,
};
example.js1 problem
import Button from "./Button";

const { propTypes } = Button;
example.jsxNo problems
import Button, { buttonPropTypes } from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...buttonPropTypes,
  icon: PropTypes.string,
};

Options#

OptionDefaultWhat it does
allowInPropTypesfalseAllow the read inside an assignment to propTypes or a propTypes class field. That code is stripped from the build too.
example.jsxwith { "allowInPropTypes": true }No problems
import Button from "./Button";

function IconButton(props) {
  return <Button {...props} />;
}
IconButton.propTypes = {
  ...Button.propTypes,
  icon: PropTypes.string,
};
example.jswith { "allowInPropTypes": true }1 problem
import Button from "./Button";

const names = Object.keys(Button.propTypes);