[DevTools Bug] Element "9" not found | Also "Element "10" not found" / "Element "12" not found"... #25769

arbocobra · 2022-12-01T18:35:20Z

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

The text was updated successfully, but these errors were encountered:

nokoro13 · 2022-12-02T00:48:25Z

I am experiencing the same bug right now

anwern27 · 2022-12-02T00:51:21Z

I am experiencing the same bug now

KLIJIN · 2022-12-02T02:22:22Z

same problem

fullsnack-coder · 2022-12-02T03:16:37Z

same problem

SthAneal · 2022-12-02T03:23:46Z

same problem

NickoA96 · 2022-12-02T04:16:10Z

same problem

gaurav-jo1 · 2022-12-02T05:10:30Z

same problem

2256184693 · 2022-12-02T05:46:17Z

same problem

abhagsain · 2022-12-02T08:39:52Z

react core members reading the Same Problem comments

gaurav-jo1 · 2022-12-02T08:41:40Z

@abhagsain 🤣🤣🤣🤣

babak2000ir · 2022-12-02T09:33:04Z

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

BlakeMack · 2022-12-02T11:01:13Z

same problem

cojoclaudiu · 2022-12-02T11:42:12Z

same here

Joker0824 · 2022-12-02T11:47:15Z

sam-ckchan · 2022-12-02T12:59:22Z

same🥲

janjanarnaldo · 2022-12-02T14:37:02Z

same problem

CeloHill · 2022-12-02T15:19:27Z

same :(

hamzatab · 2022-12-02T15:26:51Z

same x)

luisaugs · 2022-12-02T15:27:34Z

Same here...
In my case happens when use useEffect on props from functional component.

jeroanan · 2022-12-02T15:28:37Z

Same here

GailBowen · 2022-12-02T15:29:29Z

Same here

bigfarofa · 2022-12-02T15:31:25Z

It's happening to me too ;_;

rom-orlovich · 2022-12-02T15:36:33Z

Same here. The bug happens when I try to create a list of inputs that do not respond to dom events like onClick and onChange.

Alisoneoz · 2022-12-02T18:52:27Z

The same is happening here! help!

I was working with the authentication of users and wanted to display an error message in case of a failed authentication, using an onSubmit event listener

kabirolawore · 2022-12-02T19:29:04Z

The same too!

ashrafqasem · 2022-12-02T20:47:44Z

Same here

ubuntucow · 2022-12-02T20:53:13Z

Same here

Arnaud-De-Baerdemaeker · 2022-12-06T10:07:47Z

From what I see (I have the errors aswell), it appears to be thrown by the strict mode of React.

Edit : Spoke too soon :') Even without strict mode it triggers.

gaurav-jo1 · 2022-12-06T10:14:43Z

@Arnaud-De-Baerdemaeker no strict mode in my project

babak2000ir · 2022-12-06T10:23:32Z

It's even happening on "npx create-react-app my-app", even if there is no strict mode. It's not really Links, Router, useEffect or any external tool. It's a general show stopping bug everywhere and the status is not even confirmed. :/

BlakeMack · 2022-12-06T10:47:09Z

does anyone have any update as to if the react dev team are working on this react dev tools bug?

gaurav-jo1 · 2022-12-06T10:51:09Z

@BlakeMack No clue 🙂

Akatroj · 2022-12-06T10:54:37Z

hello sirs, I have the same problem 🫤

Yacubane · 2022-12-06T10:54:40Z

hello sirs, I have the same problem 🫤

watislaf · 2022-12-06T10:56:01Z

hello sirs, I have the same problem 🫤

pdramirez-dev · 2022-12-06T15:03:17Z

Hello I have the same issue

mondaychen · 2022-12-06T19:12:53Z

I'm looking into this

gaurav-jo1 · 2022-12-06T19:14:27Z

@mondaychen 🫂

babak2000ir · 2022-12-06T19:33:15Z

@mondaychen ♥️

bebop76 · 2022-12-06T20:12:33Z

Hi all,
same issue for me

chinanderm · 2022-12-06T20:24:54Z

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

…vtools (#25832) ## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useEffect`, it triggers an error. This was introduced in #25663 when we try to keep the `ReactFiberFlags` numbers consistent with reconciler, in order to fix an issue with server components. However, the values of `ReactFiberFlags` in reconciler were actually changed a while ago in b4204ed We made this mistake because, although it's not mentioned in the comment, `DidCapture` and `Hydrating` are actually used by DevTools This caused - the latest (not stable) react version is broken on devtools before 4.27.0 (but only in uncommon cases such server components) - all earlier react versions are broken on latest devtools (4.27.0) To keep most versions work, we need to revert the commit that changed the `ReactFiberFlags` values ## How did you test this change? 1. add a `useEffect` in a component in the TodoList of the shell, trigger the error in devtools 2. after change, the error is gone

…vtools (#25832) ## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useEffect`, it triggers an error. This was introduced in #25663 when we try to keep the `ReactFiberFlags` numbers consistent with reconciler, in order to fix an issue with server components. However, the values of `ReactFiberFlags` in reconciler were actually changed a while ago in b4204ed We made this mistake because, although it's not mentioned in the comment, `DidCapture` and `Hydrating` are actually used by DevTools This caused - the latest (not stable) react version is broken on devtools before 4.27.0 (but only in uncommon cases such server components) - all earlier react versions are broken on latest devtools (4.27.0) To keep most versions work, we need to revert the commit that changed the `ReactFiberFlags` values ## How did you test this change? 1. add a `useEffect` in a component in the TodoList of the shell, trigger the error in devtools 2. after change, the error is gone DiffTrain build for `d69b2cf8208848b0f71b5214ddff55a1ff437cc8`

mondaychen · 2022-12-06T23:48:01Z

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?

jesseagleboy · 2022-12-07T01:14:34Z

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)

KR-Soe · 2022-12-07T03:38:50Z

It's still not published in Chrome 😢

babak2000ir · 2022-12-07T09:17:29Z

I installed the Firefox's latest devTool and the problem doesn't exist there, good job :)

noszczykmichal · 2022-12-07T12:25:10Z

Hi, I've checked the latest versions available on Firefox and Chrome, and they both work now. Thanks guys.

villepaananen · 2022-12-07T12:43:34Z

Updated the Chrome extension and now works, thank you!

arbocobra added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Dec 1, 2022

mondaychen self-assigned this Dec 6, 2022

mondaychen mentioned this issue Dec 6, 2022

[bug fix] revert values in ReactFiberFlags to keep consistency for devtools #25832

Merged

mondaychen removed the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Dec 6, 2022

mondaychen closed this as completed Dec 7, 2022

This was referenced Dec 7, 2022

[DevTools Bug] Element "15" not found #25833

Open

[DevTools Bug] Element "744" not found #25804

Closed

[DevTools Bug] Element "7" not found #25797

Closed

[DevTools Bug] Element "3" not found #25785

Closed

[DevTools Bug] Element "9" not found | Also "Element "10" not found" / "Element "12" not found"... #25769

[DevTools Bug] Element "9" not found | Also "Element "10" not found" / "Element "12" not found"... #25769

Comments

arbocobra commented Dec 1, 2022 • edited Loading

Website or app

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

nokoro13 commented Dec 2, 2022

anwern27 commented Dec 2, 2022

KLIJIN commented Dec 2, 2022 • edited Loading

fullsnack-coder commented Dec 2, 2022

SthAneal commented Dec 2, 2022

NickoA96 commented Dec 2, 2022

gaurav-jo1 commented Dec 2, 2022

2256184693 commented Dec 2, 2022

abhagsain commented Dec 2, 2022

react core members reading the Same Problem comments

gaurav-jo1 commented Dec 2, 2022

babak2000ir commented Dec 2, 2022

BlakeMack commented Dec 2, 2022

cojoclaudiu commented Dec 2, 2022

Joker0824 commented Dec 2, 2022

sam-ckchan commented Dec 2, 2022

janjanarnaldo commented Dec 2, 2022

CeloHill commented Dec 2, 2022

hamzatab commented Dec 2, 2022

luisaugs commented Dec 2, 2022 • edited Loading

jeroanan commented Dec 2, 2022

GailBowen commented Dec 2, 2022

bigfarofa commented Dec 2, 2022

rom-orlovich commented Dec 2, 2022

Alisoneoz commented Dec 2, 2022 • edited Loading

kabirolawore commented Dec 2, 2022

ashrafqasem commented Dec 2, 2022

ubuntucow commented Dec 2, 2022

Arnaud-De-Baerdemaeker commented Dec 6, 2022 • edited Loading

gaurav-jo1 commented Dec 6, 2022

babak2000ir commented Dec 6, 2022

BlakeMack commented Dec 6, 2022

gaurav-jo1 commented Dec 6, 2022

Akatroj commented Dec 6, 2022

Yacubane commented Dec 6, 2022

watislaf commented Dec 6, 2022

pdramirez-dev commented Dec 6, 2022 • edited Loading

mondaychen commented Dec 6, 2022

gaurav-jo1 commented Dec 6, 2022

babak2000ir commented Dec 6, 2022

bebop76 commented Dec 6, 2022

chinanderm commented Dec 6, 2022

mondaychen commented Dec 6, 2022

jesseagleboy commented Dec 7, 2022

KR-Soe commented Dec 7, 2022

babak2000ir commented Dec 7, 2022

noszczykmichal commented Dec 7, 2022

villepaananen commented Dec 7, 2022

arbocobra commented Dec 1, 2022 •

edited

Loading

KLIJIN commented Dec 2, 2022 •

edited

Loading

luisaugs commented Dec 2, 2022 •

edited

Loading

Alisoneoz commented Dec 2, 2022 •

edited

Loading

Arnaud-De-Baerdemaeker commented Dec 6, 2022 •

edited

Loading

pdramirez-dev commented Dec 6, 2022 •

edited

Loading