facebook/react · warning

Could not find DevToolsInstance with id "${id}"

Error message

Could not find DevToolsInstance with id "${id}"

What it means

findHostInstancesForElementID() (the Fiber backend's handler for the 'findHostInstancesForElementID' bridge command, used by 'Show the DOM nodes rendered by this component' and native-element highlighting) looked up the element id in idToDevToolsInstanceMap and got undefined. Entries are deleted the moment a fiber unmounts (recordUnmount, renderer.js:2071) or a virtual instance unmounts (recordVirtualUnmount, renderer.js:2804), so the id is from a tree snapshot the backend has already discarded. The function returns null after warning and callers degrade gracefully.

Source

Thrown at packages/react-devtools-shared/src/backend/fiber/renderer.js:5232

      }
      node.sibling.return = node.return;
      node = node.sibling;
    }
  }

  function findAllCurrentHostInstances(
    devtoolsInstance: DevToolsInstance,
  ): $ReadOnlyArray<HostInstance> {
    const hostInstances: Array<HostInstance> = [];
    appendHostInstancesByDevToolsInstance(devtoolsInstance, hostInstances);
    return hostInstances;
  }

  function findHostInstancesForElementID(id: number) {
    try {
      const devtoolsInstance = idToDevToolsInstanceMap.get(id);
      if (devtoolsInstance === undefined) {
        console.warn(`Could not find DevToolsInstance with id "${id}"`);
        return null;
      }
      return findAllCurrentHostInstances(devtoolsInstance);
    } catch (err) {
      // The fiber might have unmounted by now.
      return null;
    }
  }

  function findLastKnownRectsForID(id: number): null | Array<Rect> {
    try {
      const devtoolsInstance = idToDevToolsInstanceMap.get(id);
      if (devtoolsInstance === undefined) {
        console.warn(`Could not find DevToolsInstance with id "${id}"`);
        return null;
      }
      if (devtoolsInstance.suspenseNode === null) {
        return null;

View on GitHub (pinned to eafeac097b)

Solutions

  1. Dismiss it as a race - wait for the Components tree to update, re-select the element, and retry.
  2. Reload the page if the element is permanently gone so stale ids are flushed.
  3. Check enabled component filters; a filtered element keeps its frontend id but disappears from the backend map.
  4. Embedders: verify store.getElementByID(id) still returns the element before sending the bridge command.

Example fix

// before (frontend)
bridge.send('findHostInstancesForElementID', id);

// after
if (store.getElementByID(id) !== null) {
  bridge.send('findHostInstancesForElementID', id);
}
Defensive patterns

Strategy: validation

Validate before calling

// frontend side: confirm the element is still in the tree before asking for host instances
if (store.getElementByID(id) === null) {
  return; // element unmounted or was filtered out
}
bridge.send('findHostInstancesForElementID', id);

Type guard

function isLiveElement(store: Store, id: number): boolean %checks {
  return store.getElementByID(id) !== null;
}

Prevention

When it happens

Trigger: Invoking 'Show the DOM nodes rendered by this component' after the component unmounted but before the panel refreshed its tree; the element got hidden by an enabled component filter; ids carried over from a previous page session via persisted state.

Common situations: Clicking inspect actions while the app navigates or Fast Refresh remounts; filtering components out mid-inspection; slow machines where the operations batch lags behind user interaction.

Related errors


AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/60ca6df017725bb5. Report an issue: GitHub.