vite-plugin-react-fiber-source

A Vite plugin to fix the React 19 issue where _debugSource was removed.

Background

React 19 removed the _debugSource property from JSX elements, causing developer tools to lose access to component source location information.

This plugin intercepts jsx-dev-runtime.js and injects source information into _debugInfo, restoring the source location functionality.

Installation

pnpm add vite-plugin-react-fiber-source -D

Usage

// vite.config.ts
import { reactFiberSource } from 'vite-plugin-react-fiber-source';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    reactFiberSource(), // Must be placed before react()
    react(),
  ],
});

Configuration Options

reactFiberSource({
  enabled: true, // Enable the plugin, default true
});

How It Works

1. Intercepts the react/jsx-dev-runtime module
2. Locates the _debugInfo definition
3. Replaces value: null with value: source
4. Handles call chain changes in React 19.2+

Compatibility

• React 18.x: This plugin is not needed, _debugSource is natively supported
• React 19.0.x: Supported
• React 19.2+: Supported

Notes

• Only works in development mode (vite dev)
• Must be placed before @vitejs/plugin-react

Reference

• vite-plugin-react-click-to-component