Next.js plugin that adds location data attributes to JSX elements for debugging
A Next.js plugin that adds location data attributes to JSX elements for debugging and development purposes.
``bash`
npm install @builder.io/nextjs-plugin-jsx-locor
yarn add @builder.io/nextjs-plugin-jsx-locor
pnpm add @builder.io/nextjs-plugin-jsx-loc
Add the plugin to your next.config.js:
`javascript
const { withJsxLoc } = require('@builder.io/nextjs-plugin-jsx-loc');
/* @type {import('next').NextConfig} /
const nextConfig = {};
module.exports = withJsxLoc({
// Optional: specify custom include/exclude patterns
// include: [/src\/components/],
// exclude: [/node_modules/, /test/]
}, nextConfig);
`
Or with TypeScript (next.config.mjs):
`typescript
import { withJsxLoc } from '@builder.io/nextjs-plugin-jsx-loc';
/* @type {import('next').NextConfig} /
const nextConfig = {};
export default withJsxLoc({
// Optional configuration
}, nextConfig);
`
This plugin works with both webpack (default) and Turbopack in Next.js applications. When you use the plugin with Turbopack, it automatically configures the necessary loaders through the turbopack.rules configuration.
To use with Turbopack in development:
`bash`After adding the plugin to next.config.js
next dev --turbo
For production builds with Turbopack (experimental):
`bash`Requires Next.js 15.3.0+
next build --turbo
For a Turborepo setup, make sure each Next.js app in your monorepo includes the plugin in its Next.js configuration.
`javascript
// apps/web/next.config.js
const { withJsxLoc } = require('@builder.io/nextjs-plugin-jsx-loc');
/* @type {import('next').NextConfig} /
const nextConfig = {};
module.exports = withJsxLoc({}, nextConfig);
`
The plugin adds a data-loc attribute to JSX elements that contains the relative file path and line number:
`jsx
// Input: src/components/Button.tsx
export function Button() {
return ;
}
// Output (during development):
export function Button() {
return ;
}
`
This allows you to identify where components are defined when inspecting the DOM.
- Adds source location information to JSX elements
- Works with both .jsx and .tsx filesnode_modules
- Skips processing of
- Preserves source maps
- Compatible with Next.js 12+ including Turbopack
- Compatible with Turborepo monorepo setups
- No configuration required
- include: RegExp or array of RegExp patterns to include specific files (optional)exclude
- : RegExp or array of RegExp patterns to exclude specific files (optional, defaults to /node_modules/`)
MIT