Skip to content

Feature: React 19 & Next.js 16 Metadata Support (Component Detection) #60

@YuniorGlez

Description

@YuniorGlez

Problem

React 19 officially removed _debugSource from Fiber nodes, which breaks component-to-source mapping in many tools. Additionally, Next.js 16 with Turbopack handles metadata differently, making it harder to identify component names during hover.

Solution

This PR introduces an enhanced Fiber Walker that:

  • Supports React 17-19 patterns (__reactFiber$, __reactProps$, etc.).
  • Aggressively probes memoizedProps for hidden metadata.
  • Injects the Component Name directly into the hover tooltip for immediate feedback.
  • Updates the forensic output to include full React Hierarchy and Source File paths when available.

Changes

  • Updated source-location.ts with robust React 19 detection logic.
  • Enhanced PageFeedbackToolbarCSS to display component names on hover.
  • Added styling for the new metadata in the tooltip (using a purple accent for React-specific info).
  • Cleaned up diagnostic logs.

This makes Agentation fully 'plug & play' for modern Next.js 16 / React 19 projects without requiring custom Babel configurations.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions