Babel Plugin for Removing React Properties

0.3.1 · maintenance · verified Sun Apr 19

This Babel plugin, currently at stable version 0.3.1, is designed to remove specified React component properties during the JavaScript transpilation process. Its primary use case is for optimizing production builds by stripping out attributes like `data-test` or `data-qa`, which are often used for testing and debugging but are unnecessary in deployed code. This minification helps reduce the final bundle size and prevents exposing internal testing hooks to end-users. The package has seen a slow release cadence, with recent updates focused on maintenance and minor feature enhancements. It differentiates itself through its focused application on React properties, providing a cleaner, more efficient production DOM compared to manually removing these attributes or leaving them in. It's configured via Babel's standard `.babelrc` or `babel.config.js` files, allowing for granular control over which properties (including those matching regular expressions) are removed, typically activated only in production environments.

Common errors

```
ReferenceError: Unknown plugin "babel-plugin-react-remove-properties" specified in "base" at 0, attempted to resolve relative to...
```
cause The plugin name in your Babel configuration includes the `babel-plugin-` prefix, which should be omitted.

fix Change the plugin name in your Babel configuration (e.g., `.babelrc` or `babel.config.js`) from `"babel-plugin-react-remove-properties"` to `"react-remove-properties"`.
```
TypeError: Invalid options for plugin 'react-remove-properties'. The 'property' option is deprecated. Use 'properties' instead.
```
cause The deprecated `property` option was used in the plugin's configuration instead of the `properties` option.

fix Update your Babel configuration to use the `properties` option, providing an array of strings or regular expressions (e.g., `["react-remove-properties", {"properties": ["data-test"]}]`).
```
Error: Plugin react-remove-properties: The 'properties' option must be an array of strings or regular expressions.
```
cause The `properties` option was provided with a value that is not an array of strings or regular expressions.

fix Ensure the `properties` option is an array containing strings (e.g., `'data-test'`) or regular expression objects (e.g., `/^qa-/`) for the properties you wish to remove.

Warnings

breaking Version 0.2.0 introduced a breaking change by dropping support for Babel 5. The plugin now requires Babel 6 or a higher compatible version.
Fix: Ensure your project's Babel installation is version 6 or newer. Upgrade Babel if currently using an older version.
deprecated The `property` option was deprecated in version 0.2.3. Users should migrate to the `properties` option, which accepts an array of strings or regular expressions for more flexible property removal.
Fix: Update your Babel configuration to use `properties: ['your-prop-name']` instead of `property: 'your-prop-name'`.
gotcha For optimal use, configure this plugin within a production environment block in your Babel configuration. This ensures properties are only removed in production builds, preserving them for development and testing environments.
Fix: Wrap the plugin configuration within an `env.production` block in your `.babelrc` or use environment-specific Babel configuration files.
gotcha When listing plugins in your Babel configuration (e.g., `.babelrc` or `babel.config.js`), always omit the `babel-plugin-` prefix from the package name. Including it will result in an 'Unknown plugin' error.
Fix: Use the short name `"react-remove-properties"` instead of the full package name `"babel-plugin-react-remove-properties"`.
gotcha When specifying regular expressions in the `properties` array (e.g., `/my-suffix-expression$/`), ensure they are correctly formatted according to JavaScript regex syntax for proper parsing by Babel.
Fix: Verify that regular expressions are syntactically correct and match your intended patterns. In `.babelrc`, they can often be provided as string literals that Babel's parser interprets as regex, or directly as `/pattern/` syntax as shown in examples.

Install

npm install babel-plugin-react-remove-properties npm
yarn add babel-plugin-react-remove-properties yarn
pnpm add babel-plugin-react-remove-properties pnpm

Imports

Plugin Name
wrong:
```
"babel-plugin-react-remove-properties"
```
correct:
```
"react-remove-properties"
```
When configuring the plugin in Babel files (e.g., `.babelrc`, `babel.config.js`), the `babel-plugin-` prefix should be omitted.
Configuration with Options
wrong:
```
["react-remove-properties", {"property": "data-test"}]
```
correct:
```
["react-remove-properties", {"properties": ["data-test", /my-suffix-expression$/]}]
```
Since v0.2.3, the `property` option was deprecated in favor of `properties`, which accepts an array of strings or regular expressions.
Node API Require
wrong:
```
import { reactRemoveProperties } from 'babel-plugin-react-remove-properties'
```
correct:
```
require('babel-plugin-react-remove-properties')
```
This is for programmatically requiring the plugin module in a Node.js environment, not for direct ES module imports of its functionality into application code.

Quickstart

This `.babelrc` configuration demonstrates how to remove specific React properties (like `data-test`, `data-qa`, and any property starting with `_qa` followed by digits) exclusively in production builds.

{
  "env": {
    "production": {
      "plugins": [
        ["react-remove-properties", {"properties": ["data-test", "data-qa", /^_qa\d+$/]}]
      ]
    }
  }
}

view raw JSON →