react: [DevTools Bug] Element "9" not found | Also "Element "10" not found" / "Element "12" not found"...

Website or app

https://github.com/arbocobra/redux-minesweeper

Repro steps

On first load I get multiple Error warnings on all app components from <Game/> down. They are identified with different Element numbers but appear to be directed to the same issue “The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15”

If you select ‘Begin Game’ in app the error in component <Game /> can be dismissed but new Errors appear on all newly rendered components below (once again all have different Element numbers directed to the same location (…/main.js:39558:15)

This is issue is probably related to [DevTools Bug] Element “41” not found

Chrome is up to date (Version 108.0.5359.71 (Official Build) (x86_64)), and restarted. I also tried reinstalling React extension (running 4.27.0).

The app is using Redux, which one commenter in other thread mentioned might be a commonality.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.27.0-bd2ad89a4

Error message (automated)

Element “9” not found

Error call stack (automated)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40933:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39771:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42429:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35080:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37705:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44505:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39439:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44686:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44115:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31940:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32584:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39834:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56039:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Element  not found in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 25
Comments: 102 (2 by maintainers)

Commits related to this issue

[bug fix] revert values in ReactFiberFlags to keep consistency for devtools (#25832) ## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useE... — committed to facebook/react by mondaychen 2 years ago
[bug fix] revert values in ReactFiberFlags to keep consistency for devtools (#25832) ## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useEffe... — committed to facebook/react by mondaychen 2 years ago

Most upvoted comments

react core members reading the Same Problem comments

react-contributors-reading-issue

+34

abhagsain on Dec 2, 2022

I am experiencing the same bug now

+19

anwern27 on Dec 2, 2022

Sorry for the inconvenience! We have submitted a patch (version 4.27.1) to the browser extension stores. It’s still under review with Chrome and Edge, but is already published for Firefox https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ Can people (who have Firefox) give it a test to see if the issue is gone for y’all?

+12

mondaychen on Dec 6, 2022

me too, actually devTools sent me here. so they’re on it 👍

babak2000ir on Dec 2, 2022

I think it’s pretty clear there is an issue, so we don’t need endless “me too” posts.

chinanderm on Dec 6, 2022

there is no solution yet, but a “we’re on it” message from react would be appreciated, i have deleted all my extensions but still having the same issue

anayo-hub on Dec 3, 2022

hello sirs, I have the same problem 🫤

watislaf on Dec 6, 2022

hello sirs, I have the same problem 🫤

Yacubane on Dec 6, 2022

hello sirs, I have the same problem 🫤

Akatroj on Dec 6, 2022

Sorry for the inconvenience! We have submitted a patch (version 4.27.1) to the browser extension stores. It’s still under review with Chrome and Edge, but is already published for Firefox https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ Can people (who have Firefox) give it a test to see if the issue is gone for y’all?

It seems to work for me with Firefox now (and I think I am using the most updated version)

jesseagleboy on Dec 7, 2022

I’m looking into this

mondaychen on Dec 6, 2022

It’s still not published in Chrome 😢

KR-Soe on Dec 7, 2022

Hello I have the same issue

Captura de pantalla 2022-12-06 100606

pdramirez-dev on Dec 6, 2022

This happened to me even when I used create-react-app, so I think Vite is not the problem.

ddbdzung on Dec 5, 2022

I have the issue happening to me as well. My component does not have a useEffect. I have useState, react-redux hooks (useDispatch, useSelector) & a custom navigation hook that uses react-router-dom useNavigate

jlong4223 on Dec 5, 2022

@laontme well that advice fixed part of the issue and now data stored in useState.

I also used Vite in my app, but after changing it to create-react-app i still have that problem. Also components in React Developer Tools is still named wrong.

hestamp on Dec 4, 2022

I got this error while going through React Router tutorial. Because it’s a study project, it was easy to just replace Vite with create-react-app and I think that fixed the issue. So I think that issue related to Vite

Also, I don’t use useEffect, but I don’t know if React Router uses it under the hood

laontme on Dec 4, 2022

Error is now gone…

I just add all of dependencies to my all my useEffects and now it works

hestamp on Dec 3, 2022

In my case React doesnt store any of data from controlled inputs using useState.

StrictMode doesnt show any of errors

hestamp on Dec 3, 2022

Same… The question is if it is somthing that harm the app?

tamiravr on Dec 4, 2022

@hestamp

I also used Vite in my app, but after changing it to create-react-app i still have that problem. Also components in React Developer Tools is still named wrong.

Yeah. I am notised that too. I have a study project and real project. In real project I also use React Router so environment almost identical and I have no error. So i think issue is not related to Vite

I am not senior React developer I am just studying so I just share with you what I see

laontme on Dec 4, 2022

@abhagsain 🤣🤣🤣🤣

DevGauravJoshi on Dec 2, 2022