[DevTools Bug] Element "41" not found #25755

Afrokk · 2022-12-01T01:49:52Z

Website or app

https://github.com/Afrokk/litmus.tools

Repro steps

In branch litmus.tools -> feature/LIT-5:
I just run the app and it throws this error.

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 "41" 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:

LuizPelegrini · 2022-12-01T04:16:02Z

This issue starts happening on my end as well, I tried to reinstall the extension but no difference

isRostCompany · 2022-12-01T09:34:29Z

~~can't confirm that the error is the same, however react-devtools extension stopped working for me as well (even in project where it worked yesterday)~~
~~current version "4.27.0, created from bd2ad89 on 11/28/2022.~~

~~Screenshot shows where it gets stuck~~

updating Google Chrome to Version 108.0.5359.71 fixed it for me

MohamedGallab · 2022-12-01T13:30:34Z

same problem, seems like it happens when redux is used.
it happens to me on a local project I am working on.
happens even after updating both chrome and firefox to the lastest versions.

ite93 · 2022-12-01T14:12:43Z

same here

yeana-dev · 2022-12-01T14:21:22Z

~~can't confirm that the error is the same, however react-devtools extension stopped working for me as well (even in project where it worked yesterday)~~ ~~current version "4.27.0, created from bd2ad89 on 11/28/2022.~~

~~Screenshot shows where it gets stuck~~

updating Google Chrome to Version 108.0.5359.71 fixed it for me

This worked for me. Make sure you go to Chrome's setting to update. The update indication on browser isn't showing.

yeana-dev · 2022-12-01T14:22:27Z

same problem, seems like it happens when redux is used. it happens to me on a local project I am working on. happens even after updating both chrome and firefox to the lastest versions.

You might want to exit and completely quit Chrome and restart.

al-husayn · 2022-12-01T14:58:58Z

same here. I used it a couple of hours ago. Is not working anymore

danilo-vieira · 2022-12-01T17:29:11Z

Same here 🐛

arbocobra · 2022-12-01T17:57:35Z

Having this issue too. Warning appeared a couple days ago.
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).

Confirm what MohamedGallab said above, my project is also using Redux.

peteredhead · 2022-12-01T23:03:39Z

I'm experiencing this issue too using the DevTools in Firefox (107.0).

One common factor I see is that the "Element x not found" error appears for functional components that are using the useEffect hook.
Other hooks I have quickly tested, such as useState don't appear to trigger the error for me.

Afrokk · 2022-12-03T12:32:37Z

I'm experiencing this issue too using the DevTools in Firefox (107.0).

One common factor I see is that the "Element x not found" error appears for functional components that are using the useEffect hook. Other hooks I have quickly tested, such as useState don't appear to trigger the error for me.

Nice find, I also think that the useEffect hook has something to do with this. My components that don't use useEffect work just fine.

…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:47:21Z

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 give it a test to see if the issue is gone for y'all?

Afrokk · 2022-12-07T05:14: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 give it a test to see if the issue is gone for y'all?

Hi, thank you! I'll give it a try as soon as it's live on Chrome.

mondaychen · 2022-12-07T21:27:11Z

It should be on Chrome web store now. Is the issue gone?

Afrokk · 2022-12-07T21:42:58Z

It should be on Chrome web store now. Is the issue gone?

I just checked, and the issue seems to be gone! Worked perfectly.

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

arbocobra mentioned this issue Dec 1, 2022

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

Closed

mondaychen self-assigned this Dec 6, 2022

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

mondaychen mentioned this issue Dec 6, 2022

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

Merged

mondaychen closed this as completed Dec 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools Bug] Element "41" not found #25755

[DevTools Bug] Element "41" not found #25755

Afrokk commented Dec 1, 2022

LuizPelegrini commented Dec 1, 2022

isRostCompany commented Dec 1, 2022 •

edited

Loading

MohamedGallab commented Dec 1, 2022

ite93 commented Dec 1, 2022

yeana-dev commented Dec 1, 2022

yeana-dev commented Dec 1, 2022

al-husayn commented Dec 1, 2022

danilo-vieira commented Dec 1, 2022

arbocobra commented Dec 1, 2022

peteredhead commented Dec 1, 2022

Afrokk commented Dec 3, 2022

mondaychen commented Dec 6, 2022

Afrokk commented Dec 7, 2022

mondaychen commented Dec 7, 2022

Afrokk commented Dec 7, 2022

[DevTools Bug] Element "41" not found #25755

[DevTools Bug] Element "41" not found #25755

Comments

Afrokk commented Dec 1, 2022

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)

LuizPelegrini commented Dec 1, 2022

isRostCompany commented Dec 1, 2022 • edited Loading

MohamedGallab commented Dec 1, 2022

ite93 commented Dec 1, 2022

yeana-dev commented Dec 1, 2022

yeana-dev commented Dec 1, 2022

al-husayn commented Dec 1, 2022

danilo-vieira commented Dec 1, 2022

arbocobra commented Dec 1, 2022

peteredhead commented Dec 1, 2022

Afrokk commented Dec 3, 2022

mondaychen commented Dec 6, 2022

Afrokk commented Dec 7, 2022

mondaychen commented Dec 7, 2022

Afrokk commented Dec 7, 2022

isRostCompany commented Dec 1, 2022 •

edited

Loading