react/forbid-foreign-prop-types

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

Reported:

import Button from "./Button";

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

import Button from "./Button";

const { propTypes } = Button;

Not reported:

import Button, { buttonPropTypes } from "./Button";

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

Options

Option	Default	What it does
`allowInPropTypes`	`false`	Allow the read inside an assignment to `propTypes` or a `propTypes` class field. That code is stripped from the build too.

import Button from "./Button";

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

import Button from "./Button";

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