Webpack/Turbopack loader for LocatorJS that enables component location tracking in projects using SWC or Turbopack where direct Babel plugin usage is not possible.
npm install @locator/webpack-loaderWebpack/Turbopack loader for LocatorJS that enables component location tracking in projects using SWC or Turbopack where direct Babel plugin usage is not possible.
Works with both Webpack and Turbopack (Next.js 15+).
``bash`
npm install --save-dev @locator/webpack-loaderor
yarn add -D @locator/webpack-loaderor
pnpm add -D @locator/webpack-loader
Add this to your next.config.ts or next.config.js:
`javascript
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
turbopack: {
rules: {
"*/.{tsx,jsx}": {
loaders: [
{
loader: "@locator/webpack-loader",
options: {
env: "development",
},
},
],
},
},
},
};
export default nextConfig;
`
Add this to your next.config.js:
`javascript`
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.module.rules.push({
test: /\.(tsx|ts|jsx|js)$/,
exclude: /node_modules/,
use: [
{
loader: "@locator/webpack-loader",
options: {
env: "development",
},
},
],
});
}
return config;
},
};
`javascript`
module.exports = {
module: {
rules: [
{
test: /\.(tsx|ts|jsx|js)$/,
exclude: /node_modules/,
use: [
{
loader: "@locator/webpack-loader",
options: {
env: "development",
ignoreComponentNames: ["CustomProvider"], // optional
},
},
],
},
],
},
};
- env (string, optional): Environment to run the loader in. Defaults to process.env.NODE_ENV or "development".ignoreComponentNames
- (string[], optional): Array of component names to ignore during transformation.
This loader uses Babel's transform API to apply the @locator/babel-jsx plugin to your JSX/TSX files. It adds data-locatorjs attributes with full file path and location information to your components, enabling click-to-source functionality even in React Server Components where JavaScript execution is limited.
The loader:
1. Parses your JSX/TSX files using Babel
2. Applies the LocatorJS transformation with path-based attributes (data-locatorjs="/path/to/file.tsx:line:column")node_modules
3. Returns the transformed code with sourcemaps
4. Automatically skips and middleware fileswindow.__LOCATOR_DATA__` - perfect for Server Components
5. Works without requiring
- Webpack 5.x
- Works with React, Preact, and SolidJS
- @locator/babel-jsx - Direct Babel plugin (use this if you have direct Babel access)
- @locator/runtime - Runtime UI library for LocatorJS
Visit locatorjs.com for complete documentation and installation guides.