SWC Plugin React Generate Paths

This SWC plugin adds a data-path attribute to every JSX tag in your React application. This attribute contains the relative path to the component file.

It is significantly faster than Babel equivalents and is compatible with any SWC-based framework, such as Next.js with Turbopack or Vite with SWC.

Installation

To install the SWC plugin, run the following command in your project:

``bash
npm install --save-dev swc-plugin-react-generate-paths
`

Usage with Turbopack (Next.js)

To use the plugin with Next.js and Turbopack, add it to the experimental.swcPlugins array in your next.config.js file:

`javascript
// next.config.js
module.exports = {
experimental: {
swcPlugins: [
[
"swc-plugin-react-generate-paths",
{
/* For example if my monorepo is at /path/to/monorepo, and the project to apply the plugin to, is at /path/to/monorepo/apps/web
This is needed to strip this part in dev mode, so the path are the same in production
You can add PATH_TO_ROOT to the dev .env, and leave it undefined in the staging .env
*/
pathToRoot: process.env.PATH_TO_ROOT,
},
],
],
},
};
`

Usage with Vite

To use the plugin with Vite, first install @vitejs/plugin-react-swc, then add the plugin to your vite.config.ts:

`typescript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
plugins: [
react({
plugins: [["swc-plugin-react-generate-paths", {}]],
}),
],
});
``