nextjs-plugin-jsx-loc

A Next.js plugin that adds location data attributes to JSX elements for debugging and development purposes.

Installation

``bash
npm install @builder.io/nextjs-plugin-jsx-loc


or

yarn add @builder.io/nextjs-plugin-jsx-loc

or

pnpm add @builder.io/nextjs-plugin-jsx-loc
`

Usage with Next.js

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);
`

Turbopack Support

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
`

Usage with Turborepo

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);
`

How It Works

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 Click me;
}

// Output (during development):
export function Button() {
return Click me;
}
`

This allows you to identify where components are defined when inspecting the DOM.

Features

- Adds source location information to JSX elements
- Works with both .jsx and .tsx files
- Skips processing of node_modules
- Preserves source maps
- Compatible with Next.js 12+ including Turbopack
- Compatible with Turborepo monorepo setups
- No configuration required

Options

- 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/`)

License

MIT