vite-plugin-react-remove-attributes

1.0.3 verified Mon Apr 27 auth: no javascript

Vite plugin to remove specified attributes (e.g., data-testid, data-cy) from React components during production builds. Current version 1.0.3 is marked as not fully tested. It filters files based on include/exclude patterns and requires Vite >=2.4.4. Unlike similar tools (e.g., babel-plugin-react-remove-properties), it integrates directly with Vite's build pipeline without additional Babel configuration.

Common errors

error TypeError: VitePluginReactRemoveAttributes is not a function ↓

cause Incorrect import: using named import instead of default import.

fix

Use: import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes'

error Error: Cannot find module 'vite-plugin-react-remove-attributes' ↓

cause Package not installed or incomplete installation.

fix

Run: npm install -D vite-plugin-react-remove-attributes

error The attribute 'data-testid' was not removed in production build ↓

cause Plugin not added to Vite config or options misconfigured.

fix

Ensure VitePluginReactRemoveAttributes is added to plugins array with attributes specified. Example: VitePluginReactRemoveAttributes({ attributes: ['data-testid'] })

Warnings

gotcha Package README states 'NOT ALL CASES TESTED YET, USE WITH CARE'. It may not work in all scenarios. ↓

fix Test thoroughly in your build pipeline before using in production.

gotcha The plugin removes attributes from all files matching include/exclude patterns, which may include non-React files if not configured properly. ↓

fix Use the 'include' and 'exclude' options to scope the plugin to your React components. Default include covers many file types.

deprecated No known deprecations yet, but version 1.0.3 is early and API may change. ↓

fix Consider pinning version or waiting for stable releases.

Install

npm install vite-plugin-react-remove-attributes

yarn add vite-plugin-react-remove-attributes

pnpm add vite-plugin-react-remove-attributes

Imports

VitePluginReactRemoveAttributes

wrong

import { VitePluginReactRemoveAttributes } from 'vite-plugin-react-remove-attributes'

correct

import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes'

Package uses default export. Named import will not work.

CommonJS require

wrong

const VitePluginReactRemoveAttributes = require('vite-plugin-react-remove-attributes')

correct

const VitePluginReactRemoveAttributes = require('vite-plugin-react-remove-attributes').default

CommonJS users must access .default due to ESM/CJS interop.

TypeScript type

import type { VitePluginReactRemoveAttributesOptions } from 'vite-plugin-react-remove-attributes'

Type is exported for options if needed.

Quickstart

Shows how to configure the plugin to remove 'data-testid' and 'data-cy' attributes from React components in a Vite project.

import { defineConfig } from 'vite';
import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes';

export default defineConfig({
  plugins: [
    VitePluginReactRemoveAttributes({
      attributes: ['data-testid', 'data-cy'],
    }),
  ],
});