Babel Plugin: TypeScript to PropTypes

Common errors

• Error: Plugin 'babel-plugin-typescript-to-proptypes' not found

  cause The plugin is not correctly installed or referenced in the Babel configuration.
  fix Ensure `babel-plugin-typescript-to-proptypes` is installed as a dev dependency (`npm install --save-dev babel-plugin-typescript-to-proptypes` or `yarn add --dev babel-plugin-typescript-to-proptypes`) and the name is correctly spelled in `babel.config.js` or `.babelrc`.

• Warning: Failed prop type: The prop `myProp` is marked as required in `MyComponent`, but its value is `undefined`.

  cause This is a runtime warning from `prop-types` itself, indicating that a required prop was not provided or was `undefined` at runtime after the plugin has generated the PropTypes.
  fix Ensure that all props marked as required in your TypeScript interface are always provided with a valid value when `MyComponent` is used. This is a logic error in your React component usage, not necessarily a plugin error.

• ReferenceError: PropTypes is not defined

  cause The generated PropTypes code relies on the `prop-types` package, but it's not imported or available in the runtime environment.
  fix Make sure `prop-types` is installed (`npm install prop-types` or `yarn add prop-types`) and that `import PropTypes from 'prop-types';` (or `const PropTypes = require('prop-types');`) is present in the file that consumes the generated PropTypes. The plugin *adds* the `import` statement for you, but the package still needs to be installed.

Warnings

• breaking Version 2.0.0 dropped support for TypeScript v3 and Node.js v10. Users on these older environments must upgrade their toolchain or remain on `babel-plugin-typescript-to-proptypes` v1.x.
  Fix: Upgrade TypeScript to v4.0.0 or v5.0.0 and Node.js to v12.17.0 or higher. Alternatively, pin your dependency to `babel-plugin-typescript-to-proptypes@^1`.
• gotcha This plugin operates on Babel's Abstract Syntax Tree (AST) and does NOT run TypeScript's full type checker. This means it cannot resolve type information for props or types referenced from external files. All relevant type definitions must be within the same file as the component.
  Fix: Ensure all TypeScript interfaces and type aliases used for component props are declared directly within the same `.tsx` or `.ts` file as the React component itself. Avoid importing prop types from other modules if you expect them to be converted.
• gotcha Requires either `@babel/plugin-syntax-jsx` or `@babel/preset-react` to parse JSX syntax. If transpiling to ES5 or lower, `@babel/plugin-proposal-class-properties` is also required.
  Fix: Include `@babel/preset-react` in your Babel presets array. If you are targeting older JavaScript environments, also add `@babel/plugin-proposal-class-properties` to your plugins.
• gotcha It is generally recommended to enable this plugin only for development environments or when building a library, not for production application builds, as PropTypes add to bundle size and are typically not needed in production.
  Fix: Wrap the plugin inclusion in your Babel config with an environment check, e.g., `process.env.NODE_ENV !== 'production' && 'babel-plugin-typescript-to-proptypes'`.

Install

• npm install babel-plugin-typescript-to-proptypes npm
• yarn add babel-plugin-typescript-to-proptypes yarn
• pnpm add babel-plugin-typescript-to-proptypes pnpm

Imports

• babel-plugin-typescript-to-proptypes

  plugins.push('babel-plugin-typescript-to-proptypes');

  This is a Babel plugin, not a direct JavaScript import. It's configured as a string in your Babel configuration file (e.g., `babel.config.js`).
• babel-plugin-typescript-to-proptypes options

  plugins.push(['babel-plugin-typescript-to-proptypes', { comments: true }]);

  Plugin options are passed as a second element in the array when configuring the plugin in Babel. Options like `comments` or `mapUnknownReferenceTypesToAny` are available.
• PropTypes
  wrong:

  const PropTypes = require('prop-types');

  correct:

  import PropTypes from 'prop-types';

  This is the import for the `prop-types` library, which the plugin's *output* code will use. Ensure `prop-types` is installed and imported in the generated or runtime code.

Quickstart

Demonstrates a simple React functional component with a TypeScript interface, showing the input code that the plugin transforms into code with `PropTypes`. The Babel configuration snippet shows how to enable the plugin, typically outside of production builds.

import React from 'react';
import PropTypes from 'prop-types';

interface MyComponentProps {
  /** A required string prop */
  name: string;
  count?: number;
  isActive: boolean;
}

function MyComponent(props: MyComponentProps) {
  return (
    <div>
      <p>Hello, {props.name}</p>
      {props.count && <p>Count: {props.count}</p>}
      {props.isActive ? <p>Active</p> : <p>Inactive</p>}
    </div>
  );
}

// babel.config.js (config for the plugin)
// This quickstart demonstrates the *before* and *after* for the plugin.
// To actually run the plugin, you'd need a Babel setup.
// Add this to your Babel configuration's plugins array:
// plugins: [
//   '@babel/preset-typescript',
//   '@babel/preset-react',
//   process.env.NODE_ENV !== 'production' && ['babel-plugin-typescript-to-proptypes', { comments: true }],
// ].filter(Boolean),

// Expected output after plugin execution (simplified):
// MyComponent.propTypes = {
//   /** A required string prop */
//   name: PropTypes.string.isRequired,
//   count: PropTypes.number,
//   isActive: PropTypes.bool.isRequired,
// };

export default MyComponent;