SWC plugin to generate paths for React components
npm install swc-plugin-react-generate-pathsThis 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.
To install the SWC plugin, run the following command in your project:
``bash`
npm install --save-dev swc-plugin-react-generate-paths
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,
},
],
],
},
};
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", {}]],
}),
],
});
``