{"id":10547,"library":"babel-plugin-transform-react-remove-prop-types","title":"Babel Plugin to Remove React PropTypes","description":"This Babel plugin, currently at version `0.4.24`, is designed to optimize React applications by effectively removing `propTypes` definitions from the production build. `propTypes` are primarily utilized for development-time type checking and debugging, and thus represent unnecessary overhead in production bundles, contributing to larger file sizes and increased load times. The plugin offers distinct `mode` options: `remove` (the default for most applications), `wrap`, and `unsafe-wrap`. The `wrap` and `unsafe-wrap` modes are specifically tailored for React library authors, enabling them to retain some `propTypes` behavior in development while ensuring optimization for production scenarios. The `remove` mode is generally recommended for direct application authors seeking maximum bundle size reduction. The project exhibits a consistent, albeit at times gradual, release cadence, with recent patches focusing on improved type checking logic, custom `createReactClass` function support, and more robust handling of unused identifier removal. It integrates seamlessly into the Babel ecosystem, typically configured via standard Babel configuration files such as `.babelrc` or `babel.config.js`.","status":"active","version":"0.4.24","language":"javascript","source_language":"en","source_url":"https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types","tags":["javascript","babel","babel-plugin","react","minification","propTypes"],"install":[{"cmd":"npm install babel-plugin-transform-react-remove-prop-types","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-react-remove-prop-types","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-react-remove-prop-types","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for Babel transformation pipeline; typically a peer dependency for Babel plugins (Babel 7+).","package":"@babel/core","optional":false}],"imports":[{"note":"This is the primary way to include the plugin in your Babel configuration files (e.g., `.babelrc`, `babel.config.js`) or via the Babel CLI. It is referenced by its string name and is not typically imported as a module into application JavaScript/TypeScript code.","wrong":"import removePropTypes from 'babel-plugin-transform-react-remove-prop-types';","symbol":"\"transform-react-remove-prop-types\"","correct":"{ \"plugins\": [\"transform-react-remove-prop-types\"] }"},{"note":"For programmatic configuration via Babel's Node API (e.g., within a `babel.config.js` file or a custom build script), the plugin's function is the default export of its module. Direct `import` syntax might not be inappropriate depending on your Babel configuration's module system, though `require` is common for plugin loading.","wrong":"import { transformReactRemovePropTypes } from 'babel-plugin-transform-react-remove-prop-types';","symbol":"babelPluginTransformReactRemovePropTypes","correct":"const plugin = require('babel-plugin-transform-react-remove-prop-types');\n// Then use `plugin` in Babel's Node API configuration."}],"quickstart":{"code":"const babel = require('@babel/core');\nconst code = `\n  import PropTypes from 'prop-types';\n  const MyComponent = ({ value }) => <div>{value}</div>;\n  MyComponent.propTypes = {\n    value: PropTypes.string.isRequired\n  };\n`;\n\n// Simulate a production environment for the plugin to activate\nprocess.env.NODE_ENV = 'production';\n\nconst result = babel.transformSync(code, {\n  filename: 'my-component.js',\n  plugins: [\n    // Required for Babel to parse JSX and ES modules before this plugin runs\n    ['@babel/plugin-transform-react-jsx', { pragma: 'React.createElement' }],\n    ['@babel/plugin-transform-modules-commonjs', { loose: true }],\n    // The plugin itself, configured for removal\n    ['babel-plugin-transform-react-remove-prop-types', {\n      mode: 'remove', // Default is 'remove', can also be 'wrap' or 'unsafe-wrap'\n      ignoreFilenames: ['node_modules'], // Example option: ignore files in node_modules\n      removeImport: true // Also remove the 'import PropTypes from \"prop-types\"' statement\n    }]\n  ]\n});\n\nconsole.log('Transformed Code (Production):\\n', result.code);\n\n// Reset NODE_ENV to avoid affecting other tests or processes\nprocess.env.NODE_ENV = 'test';\n","lang":"javascript","description":"Demonstrates how to integrate and use `babel-plugin-transform-react-remove-prop-types` via Babel's Node API. It transforms a React component, removing its `propTypes` and the `prop-types` import statement in a simulated production environment."},"warnings":[{"fix":"For most React applications, use `mode: 'remove'` or omit the `mode` option entirely (as `remove` is the default). Ensure the plugin is only active in your production build configuration.","message":"The `mode: 'wrap'` and `mode: 'unsafe-wrap'` options are specifically designed for React library authors, not general application development. Using them in applications can lead to larger bundle sizes than `mode: 'remove'` or unexpected runtime behavior, as `propTypes` might still be present as an empty object or conditionally defined.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your project is running Babel 7 (or a compatible newer version). Update `@babel/core` and related Babel presets/plugins to their latest versions, often using scoped packages like `@babel/preset-env`.","message":"As of v0.4.16, the plugin explicitly updated to support Babel 7. While designed for forward compatibility, users on very old Babel versions (Babel 6 or earlier) might encounter compatibility issues or require a Babel upgrade to fully utilize the latest features and fixes.","severity":"breaking","affected_versions":">=0.4.16"},{"fix":"Add `/* remove-proptypes */` directly after the `propTypes` definition to explicitly mark it for removal, e.g., `Component.propTypes /* remove-proptypes */ = {}`.","message":"For React components utilizing Higher-Order Components (HOCs) or certain inheritance patterns, `propTypes` might not be correctly identified and removed by default. A special comment annotation is required to force removal in such complex cases.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `removeImport: true` when `mode: 'remove'`. Also, ensure your bundler (Webpack, Rollup, etc.) doesn't include `prop-types` globally or as an external dependency in production builds if you intend to fully eliminate it.","message":"The `removeImport: true` option will remove the `import PropTypes from 'prop-types';` statement. This option only works reliably with `mode: 'remove'`. If not handled correctly (e.g., if the `prop-types` package is still referenced by your bundler's globals), it might lead to residual `prop-types` code in the bundle or build errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use the `ignoreFilenames` option to exclude `node_modules` from processing: `ignoreFilenames: ['node_modules']`. This ensures the plugin only modifies your own application code.","message":"The plugin's documentation advises *not* parsing `node_modules` with this plugin, especially in `remove` or `unsafe-wrap` modes. Some third-party React libraries might unexpectedly depend on `propTypes` being present at runtime, leading to breakage if they are removed.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Switch to `mode: 'remove'` (default) or `mode: 'wrap'`. `mode: 'wrap'` sets `propTypes` to an empty object `{}` in production, preventing runtime errors from undefined access, though it results in a slightly larger bundle than `remove`.","cause":"This typically occurs when `mode: 'unsafe-wrap'` is used, and some part of your application or a third-party library attempts to access `Component.propTypes` at runtime in production.","error":"TypeError: Cannot read properties of undefined (reading 'className') (or similar property access errors) in production builds."},{"fix":"Ensure your Babel configuration includes the plugin within an `env.production` block (e.g., in `.babelrc` or `babel.config.js`) and that your build process correctly sets `NODE_ENV=production` when bundling for production.","cause":"The plugin is likely not being applied correctly in your production build environment. Common causes include not setting `process.env.NODE_ENV = 'production'` or misconfiguring your Babel `env` block.","error":"PropTypes are still present in my production bundle!"},{"fix":"Add the `removeImport: true` option to the plugin configuration, for example: `['babel-plugin-transform-react-remove-prop-types', { removeImport: true }]`. Ensure this is only used with `mode: 'remove'` for full effect.","cause":"By default, the plugin removes the `propTypes` declarations but leaves the `import` statement. This can also happen if your bundler globally includes `prop-types` or if you have other references.","error":"The `prop-types` import statement (e.g., `import PropTypes from 'prop-types';`) is still in my production bundle, even though the definitions are gone."}],"ecosystem":"npm"}