Compiler integrations

The compiler integration stamps JSX elements with static source markers. The runtime resolver uses those markers before falling back to React Fiber component names. Runtime collection works without the plugin, but source attribution is less precise.

Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { askdepthVitePlugin } from '@askdepth/react/plugin';

export default defineConfig({
  plugins: [
    react(),
    askdepthVitePlugin({ environment: process.env.NODE_ENV }),
  ],
});

The package plugin runs with pre-transform ordering. Your application supplies Vite and its React plugin; they are not installed by Askdepth.

Next.js with Webpack

// next.config.cjs — when the Next.js build uses Webpack
const { withAskdepth } = require('@askdepth/react/plugin');

module.exports = withAskdepth({});

withAskdepth preserves an existing synchronous webpack(config, context) hook and adds the Askdepth plugin to both server and client configurations. It does not configure Turbopack. Use the Webpack build mode supported by your Next.js version when choosing this integration.

For a standalone Webpack configuration, add askdepthWebpackPlugin(options) to plugins. Rspack exposes the equivalent askdepthRspackPlugin(options) from the same subpath.

Turbopack

Use the separate published loader rather than withAskdepth:

// next.config.cjs — for Next.js versions using the turbopack key
module.exports = {
  turbopack: {
    rules: {
      '*.tsx': {
        loaders: ['@askdepth/react/turbopack-loader'],
        as: '*.tsx',
      },
      '*.jsx': {
        loaders: ['@askdepth/react/turbopack-loader'],
        as: '*.jsx',
      },
    },
  },
};

The loader reads NODE_ENV for production behavior and emits a source map through the loader callback. The configuration key and available compiler flags depend on your Next.js version; use that version's configuration format. Configuring only a Webpack hook does not instrument a Turbopack build.

Development and production markers

Markers describe source locations, not user data. Existing markers are preserved. React fragments are skipped. The transform accepts JSX/TSX and supported JavaScript JSX-runtime calls, ignores node_modules, and can skip files it cannot parse. Custom components must forward the marker to a DOM element for the DOM resolver to see it.

Without markers, resolveComponentLocation(element) attempts a Fiber walk. It returns a component name and stack or null; production minification can reduce meaningful names. Fiber attribution relies on React internals and is not a stable React public API.

Keep production maps private

Production transforms write source lookup JSON files. Vite, Webpack, and Rspack plugin options accept buildId and mappingDir. Environment defaults apply to these integrations and to the Turbopack loader:

ASKDEPTH_BUILD_ID=release_2026_10_12
ASKDEPTH_COMPONENT_MAP_DIR=/private-build-artifacts/component-maps

The build ID falls back to GITHUB_SHA, then a local process-based ID. The default directory is .askdepth/component-maps/<build-id>/. Retain the files with the matching release, outside publicly served assets. The compiler writes local files; it does not automatically upload them or register your deployment with a collector.