vite-plugin-react-swc

vite-plugin-react-swc copied to clipboard

Description

I am trying to use the @swc/plugin-react-remove-properties in my react app to remove the data-testid HTML attribute from our production code. However the plugin does not seem to be working. I wanted to first see if this is an issue with using vite-plugin-react-swc. I might also be configuring the plugin incorrectly

Here is a snippet of my vite.config.ts :

import react from '@vitejs/plugin-react-swc'

const debugEnvironments = new Set(['development', 'staging'])

export default defineConfig(({ mode }) => {
    # come configuration
    const swcPlugins = [
        ['@swc/plugin-emotion', {}],
        [`@swc/plugin-react-remove-properties`, { properties: ['^data-testid$'] }],
    ]
     const debug = debugEnvironments.has(mode)

    if (debug) {
       // remove react-remove-properties for debugging
        swcPlugins.pop()
     }
     
    return {
        build: {
            sourcemap: true, 
        },
        server: {
            host: true,
            port: 3001,
        },
        preview: {
            host: true,
            port: 3001,
        },
        plugins: [
            react({
                jsxImportSource: '@emotion/react',
                plugins: swcPlugins,
            }),
        # other plugins
       ],
      define: # some definition
      }
})

Attempts to resolve

I am able to build with this config without any errors.@swc/plugin-react-remove-properties README says to use react-remove-properties in the config but this seems incorrect and I am getting an error as well.

I tried various patterns for properties such as passing a value without regex and even using class. None of this seems to work. I even tried the using the plugin without properties hoping that it will remove data-test similar to Next.js implementation but this did not work.

I appreciate your help!

From the npm doc it seems you need to use react-remove-properties and not @swc/plugin-react-remove-properties but maybe this is not that, the doc is really short

@ArnaudBarre thanks for your response. I tired using react-remove-properties and it gave me an error during build stating that it cannot resolve the plugin name. I think the doc may be incorrect. It seems to be reusing how babel-plugin-react-remove-properties configure's it plugin in via babelrc.

Is there a better way to resolve the name of the plugin?

I think the issue is with the plugin. You should try to reproduce by having a simple node script that call SWC with just this plugin on a 2 lines input passed via a string argument. Then you can report it to the lib or it will help showcase the reason of the issue. This plugin is really just a more complex wrapper around that, but it should not alter how plugins are applied

I did a test locally with the plugin and the options provided on the starter app, it works great, the added data-testid="2" on the div was removed in dev.

Config used:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [
    react({
      plugins: [["@swc/plugin-react-remove-properties", { properties: ['^data-testid$'] }]],
    }),
  ],
});

with the latest version of the plugin ans @swc/core