{"record":{"id":"78b076b35028f263","repo":"facebook/react","slug":"invalid-renderer-id-match-rendererid-for-elem","errorCode":null,"errorMessage":"Invalid renderer id \"${match.rendererID}\" for element \"${match.id}\"","messagePattern":"Invalid renderer id \"(.+?)\" for element \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-devtools-shared/src/backend/views/Highlighter/index.js","lineNumber":461,"sourceCode":"        }\n      } catch (error) {\n        // This can error when the iframe is on a cross-origin.\n      }\n    }\n\n    if (inspectOnlySuspenseNodes) {\n      // For Suspense nodes we want to highlight not the actual target but the nodes\n      // that are the root of the Suspense node.\n      // TODO: Consider if we should just do the same for other elements because the\n      // hovered node might just be one child of many in the Component.\n      const match = agent.getIDForHostInstance(\n        target,\n        inspectOnlySuspenseNodes,\n      );\n      if (match !== null) {\n        const renderer = agent.rendererInterfaces[match.rendererID];\n        if (renderer == null) {\n          console.warn(\n            `Invalid renderer id \"${match.rendererID}\" for element \"${match.id}\"`,\n          );\n          return;\n        }\n        highlightHostInstance({\n          displayName: renderer.getDisplayNameForElementID(match.id),\n          hideAfterTimeout: false,\n          id: match.id,\n          openBuiltinElementsPanel: false,\n          rendererID: match.rendererID,\n          scrollIntoView: false,\n        });\n      }\n    } else {\n      // Don't pass the name explicitly.\n      // It will be inferred from DOM tag and Fiber owner.\n      showOverlay([target], null, agent, false);\n    }","sourceCodeStart":443,"sourceCodeEnd":479,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/backend/views/Highlighter/index.js#L443-L479","documentation":"In the Highlighter's mouse-over handler, when inspecting only Suspense-related nodes DevTools maps the hovered DOM target to {id, rendererID} via agent.getIDForHostInstance(target, true). It then resolves agent.rendererInterfaces[match.rendererID]; if that renderer is no longer registered (root unmounting or agent teardown racing the hover), the hover highlight is dropped with this warning. It is a benign race between DOM inspection and renderer registration.","triggerScenarios":"Hovering the page exactly while a root is being unmounted or the renderer is detaching from the DevTools agent; hovering Suspense boundary DOM during a page reload; inspectOnlySuspenseNodes mode active in the Activity/Suspense tab.","commonSituations":"Mouse-over during route transitions that unmount roots; hovering while HMR swaps the tree; DevTools attached to an app whose roots are frequently created and destroyed.","solutions":["Ignore it if it appears once during teardown — it is a no-op guard, not a functional failure.","Hover again after the unmount/reload completes.","Avoid hovering during known teardown windows when using the Suspense inspection mode."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const match = agent.getIDForHostInstance(target, true);\nif (match !== null && agent.rendererInterfaces[match.rendererID] != null) {\n  // safe to highlight\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ignore single occurrences during teardown; they are no-op guards.","Avoid hovering during route unmounts when inspecting Suspense nodes.","Ensure renderers unregister only after pending hover events are flushed in embedded setups."],"tags":["react-devtools","highlighter","hover","suspense","renderer-registration","dev-only"],"backgroundTag":"renderer-not-registered","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-22T04:17:13.399Z"}