[DevTools Bug] Could not inspect element with id "219". Error thrown:Cached data for element "219" not found

[HomeskulTest]

Website or app

employer-test.apna.co

Repro steps

The error occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37563:3)
at Suspense
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36542:3)
at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38972:3)
at div
at div
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34323:3)
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34764:3)
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40911:52)
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36249:5)
at div
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42093:3)
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40537:3)
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29185:3)
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29796:3)
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36605:3)
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:51354:3)

How often does this bug happen?

Often

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.18.0-f58bbcf9a

Error message (automated)

Could not inspect element with id "219". Error thrown:Cached data for element "219" not found

Error call stack (automated)

No response

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37563:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36542:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38972:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34323:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34764:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40911:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36249:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
    at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42093:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40537:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29185:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29796:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36605:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:51354:3)

GitHub query string (automated)

https://github.com/api/search/issues?q=Could not inspect element with id . Error thrown:
Cached data for element  not found in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[bvaughn]

Hi @HomeskulTest.

I'm sorry you ran into this problem 😦

Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce it though. (An error stack is not a substitution for repro steps.) This means that it's going to be very hard for us to fix.

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[facundoperezh]

I'm experiencing the same issue
The error occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37477:3) at Suspense at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35891:5) at div at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36324:3) at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38859:3) at div at div at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34120:3) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34561:3) at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40784:52) at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35891:5) at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36009:3) at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36043:5) at div at div at div at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36009:3) at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41854:3) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40410:3) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28987:3) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29598:3) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36387:3) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:50748:3)

[Ambrish-Tiwari]

Hello,
I am facing the same issue.
The error occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37563:3)
at Suspense
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36542:3)
at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38972:3)
at div
at div
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34323:3)
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34764:3)
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40911:52)
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36249:5)
at div
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42093:3)
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40537:3)
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29185:3)
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29796:3)
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36605:3)
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:51354:3)

[myrddral]

This happened with me when I was (probably foolishly) pass down props to a toast component directly into a state, like below:
const [show, setShow] = useState(props.show);

[bvaughn]

Please see my above comment (#22241 (comment)) saying that we need someone to share a way for us to reproduce this bug. Unfortunately stack traces or +1 comments don't help much.

[nikitabhardwaj]

Edited: P.S. My code is working now and it is not giving below error. So I guess whoever had this error probably needs to fix their code, like me!
Previous:
I got the same issue for the first time!
Code Sandbox link: https://codesandbox.io/s/changing-complex-state-practice-forked-w006j?file=/src/components/App.jsx
This is the error I am getting:
Uncaught Error: Could not inspect element with id "2". Error thrown: Cached data for element "2" not found
Dismiss
The error occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37563:3)
at Suspense
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36542:3)
at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38972:3)
at div
at div
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34323:3)
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34764:3)
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40911:52)
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36097:5)
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36249:5)
at div
at div
at div
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36215:3)
at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42093:3)
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40537:3)
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29185:3)
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29796:3)
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36605:3)
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:51354:3)

I hope @bvaughn it helps you in fixing.

[SleepDevil]

Hi, I'm facing the same problem.Here is a minimal code example： codesandbox
In this case, I want to change everyone of my array state from an empty object to an object with loading: false;I change them in my changeArray method but it doesn't work.So I go to the react dev tools to see the state inside.At first, it looks normal.But when I close the chrome dev tools and open it again, it throws the above error: Uncaught Error: Could not inspect element with id "3". Error thrown: Cached data for element "3" not found

So the way to reproduce the bug is:
First, open the codesandbox above,and copy the link inside, open it seperatly as a tab in chrome,like this:

Second, open the chrome dev tools and go to the react dev tools to see the state inside the components, it's normal!
Third, close the chrome dev tools and open it again, then go to the react dev tool and inspect the element, it will throw error.
I hope this will help you in fixing. @bvaughn

[bvaughn]

@SleepDevil Thank you for sharing these steps! I am able to repro it indeed.

I believe what's happening is this:

• DevTools has two main pieces:
  • The frontend is the extension you see (Components and Profiler)
  • The backend is runs in the same context as React itself (in the browser page)
• Inspecting an elements props/state involves:
  • The frontend asking the backend to send it props and state and then caching the response
  • The frontend polling the backend occasionally to see if props or state has changed and using the previous cached response if they have not

In the case you describe above, closing and re-opening DevTools blows away that cache. The backend thinks the frontend still has the cache though, and so it returns a "no-change" response.

This is clearly a case that DevTools doesn't handle properly that's clear in hindsight. :)

[SleepDevil]

@bvaughn I'm glad it can help you.By the way, can you help me solve my problem in the codesandbox?The problem is: I try to set my array state one by one after one second, from an empty object to an object with a loading key and false value.But my code just set the first one.And I can fix this by use the useArray like this:

setArray((prev) =>
  prev.map((item, index) => (index === i ? { loading: false } : item))
);

But I don't know why I can't operate on the newArray I deep copy and then setArray(newArray).
And I also have a try when I remove the await myPromise(); statement, and it works!
It also works when I change the setArray(newArray) with the setArray([...newArray]), which makes a shallow copy.
I just don't know why my code doesn't work and what is the real state inside the component in my code(because the devtools show me different state when I open it in different time...)
I hope you can help me solve this problem.

[bvaughn]

I think it's best to keep discussion on this issue focused on the DevTools bug being reported.