[DevTools Bug] Could not find ID for Fiber "App"

[grndctrl]

Website or app

https://codesandbox.io/s/react-devtools-bug-z2vjo

Repro steps

Run the Next app, open up react dev tools and inspect the Box component, rendered by @react-three/fiber.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.23.0-e28a0db22

Error message (automated)

Could not find ID for Fiber "App"

Error call stack (automated)

at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:6493:11)
    at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8237:11)
    at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8406:21)
    at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8709:38)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10542:56
    at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4225:18)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4868:14
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:12535:9)

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39022:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37864:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40513:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33354:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42520:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not find ID for Fiber "App" in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[lunaruan]

Hey, thanks for reporting this issue, and sorry it's blocking your workflow.

Edit: The reason for this issue seems to be that there are multiple fiberToIDMaps instances, and the one that we are using to get the fiber's ID when we inspect doesn't have the App fiber (a recursive owner of Box).

We'll look into why this is occurring soon!

[bvaughn]

Fixed via #24116