Install Locator for React

Easiest way to start with Locator is to install a Browser Extension
You can get extension for Chrome, Edge, Brave, Opera, Firefox

If you would like to install Locator to your project, so all team members can use it. You can install it as a library.

npm install -D @locator/runtime

Add this to pages/_app.jsx (or other global file):

import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

For Next.js 15+ using Turbopack or SWC (where babel plugins don't work), use the webpack/turbopack loader:

npm install -D @locator/webpack-loader

Add this to your next.config.ts:

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:

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

Locator should work automatically in dev mode in most modern stacks. They automatically include babel-preset-react which includes babel-plugin-transform-react-jsx-source
Non-babel stacks use similar alternatives.

If you don't have babel-plugin-transform-react-jsx-source you should set it up manually.
Or try alternative: installation based on custom Babel plugin