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:

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:

// 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:

// 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", {}]],
    }),
  ],
});