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.

Compatibility

SWC Wasm plugins are tightly coupled to the swc_core version used by the host runtime. Pick the package version that matches your framework:

| Plugin version | swc_core | Next.js | @swc/core (Vite, etc.) | npm dist-tag | | --- | --- | --- | --- | --- | | 0.1.x | 50.2.x | 16.2.x | >= 1.13 | latest, next-16 | | 0.0.x | 36.x | 15.x | >= 1.7, < 1.13 | next-15 |

If you upgrade Next.js across a major version, bump this plugin to the matching major as well, otherwise you will see a runtime error similar to:

× failed to invoke plugin on '…/next/dist/client/app-next-dev.js'

This indicates the wasm was built against a different swc_core ABI than your host. See the SWC plugin registry for the full compatibility matrix.

Installation

Install the version that matches your Next.js major:

# Next.js 16
npm install --save-dev swc-plugin-react-generate-paths@next-16

# Next.js 15
npm install --save-dev swc-plugin-react-generate-paths@next-15

Or pin an explicit version range:

npm install --save-dev "swc-plugin-react-generate-paths@^0.1.0"

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