facebook/react · warning

Invalid renderer id "${rendererID}" for element "${id}"

Error message

Invalid renderer id "${rendererID}" for element "${id}"

What it means

In the DevTools backend Agent, copyElementPath handles the 'copy value' context-menu action on a property in the Components panel: it resolves this._rendererInterfaces[rendererID] to reach the renderer that owns the element. If that lookup misses it warns `Invalid renderer id "N" for element "X"` and skips the copy entirely. The element id in the message identifies which inspected node carried the stale renderer reference.

Source

Thrown at packages/react-devtools-shared/src/backend/agent.js:416

    id,
    rendererID,
  }) => {
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}"`);
    } else {
      renderer.clearWarningsForElementID(id);
    }
  };

  copyElementPath: CopyElementParams => void = ({
    id,
    path,
    rendererID,
  }: CopyElementParams) => {
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
    } else {
      const value = renderer.getSerializedElementValueByPath(id, path);

      if (value != null) {
        this._bridge.send('saveToClipboard', value);
      } else {
        console.warn(`Unable to obtain serialized value for element "${id}"`);
      }
    }
  };

  deletePath: DeletePathParams => void = ({
    hookID,
    id,
    path,
    rendererID,
    type,
  }: DeletePathParams) => {

View on GitHub (pinned to eafeac097b)

Solutions

1. Re-select the element after the tree settles so the panel refreshes its renderer binding, then copy again.
2. Reload the page with DevTools attached to rebuild all ids.
3. If embedding DevTools, validate the rendererID against agent.rendererInterfaces before issuing copyElementPath.
4. Keep DevTools extension and react-devtools-shared versions aligned.

const hasRenderer = (agent: any, rendererID: number) =>
  Object.prototype.hasOwnProperty.call(agent.rendererInterfaces, rendererID);

if (hasRenderer(agent, rendererID)) {
  agent.copyElementPath({id, path, rendererID});
}

function isValidRendererID(agent: any, rendererID: number): boolean {
  return agent.rendererInterfaces[rendererID] != null;
}

When it happens

Trigger: Right-clicking a property and choosing copy after the inspected element's renderer detached — app reloaded or the root unmounted — so the cached rendererID no longer maps to an interface.

Common situations: Copying state/props while the app reloads or Fast Refreshes in the background; DevTools selection persisted across reloads; multi-renderer pages where one root unloads.

Related errors

• Invalid renderer id "${rendererID}"
• Unable to obtain serialized value for element "${id}"
• ReactART does not support the type "${type}"
• The should not be any remaining suspense node children if th
• There should always be an Offscreen Fiber child in a hydrate

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