facebook/react · warning

Unable to obtain serialized value for element "${id}"

Error message

Unable to obtain serialized value for element "${id}"

What it means

In copyElementPath, after the renderer lookup succeeds, DevTools asks the renderer to serialize the value at the chosen path via getSerializedElementValueByPath(id, path). If that returns null — the path no longer resolves (the element re-rendered or unmounted, hook state changed shape) or the value cannot be serialized for the clipboard — DevTools warns `Unable to obtain serialized value for element "X"` and sends nothing to saveToClipboard, so no copy happens.

Source

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

      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) => {
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
    } else {
      renderer.deletePath(type, id, hookID, path);
    }
  };

View on GitHub (pinned to eafeac097b)

Solutions

1. Re-select the element (or re-expand the subtree) to refresh inspected paths, then copy again.
2. Expand the value fully before copying so its path is completely hydrated.
3. Update React DevTools if stale paths after re-renders reproduce frequently.
4. If it persists on current versions, report it with the value shape — serialization gaps are treated as DevTools bugs.

// Embedder-side: verify a serializable value exists before offering 'copy'.
const value = renderer.getSerializedElementValueByPath(id, path);
if (value != null) {
  bridge.send('saveToClipboard', value);
} else {
  // refresh inspection (re-select element) instead of copying
}

When it happens

Trigger: Invoking copy on a property whose cached path is stale because the inspected element re-rendered between inspection and the copy action; copying from a partially inspected/dehydrated tree where the path was never fully hydrated.

Common situations: Copying state or props while the app updates in the background; stale inspection cache after Fast Refresh; very deep or large values that were pruned from the inspected payload.

Related errors

• Unexpected dehydrated hook; this is a DevTools error.
• Invalid renderer id "${rendererID}"
• Invalid renderer id "${rendererID}" for element "${id}"
• Invalid reference.
• Missing a temporary reference set but the RSC response retur

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