[DevTools Bug] Cannot remove node "612" because no matching node was found in the Store.

[steve-snow]

Website or app

proprietary

Repro steps

Overall, testing and refactoring of a component containing a formik wrapped form which includes a fieldarray with yup schema.
Using VS Code to serve the React js application.

Unable to share the repo / website as it is proprietary.

Task: Logged in to the app to see the form as the specific user role required to see the component, testing yup schema on formik elements touched property to do some custom error connections in the containing component with React Developer Tools open to the Components view with the console also open.

I was verifying the elements described in the schema file were getting 'touched' and was refining a select in yup schema js file.

Switched one element's schema property from yup.object() to yup.int() triggers the error. This is a syntax error. Should be yup.number(). But switching the two causes it all to crash.

"formik": "^2.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-router-dom": "4.3.1",
"react-select": "^4.3.0",
"yup": "^0.26.10"
"yarn": "^1.13.0",

"babel-eslint": "^10.1.0",

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.23.0-e28a0db22

Error message (automated)

Cannot remove node "612" because no matching node was found in the Store.

Error call stack (automated)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26349:43
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24415:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24581:14
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54033:39)

Error component stack (automated)

No response

GitHub query string (automated)

https://api.github.com/search/issues?q=Cannot remove node  because no matching node was found in the Store. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[bvaughn]

Unfortunately "proprietary" isn't a repro we can do anything with. Handing this back to you in hopes of getting something we can repro and look into, @steve-snow.

Generally it's helpful to reduce the problem locally to as little code as you can (including dependencies) and then host it on Code Sandbox.

[RobIsHere]

I can confirm that I have the same issue.

[RobIsHere]

It also happens when I fill in a form field. As soon as this happens, parameters given to my component change and this bug immediately appears every time.

[lunaruan]

@RobIsHere Thanks for commenting! Unfortunately, without a reproducible repro on our side, we're unable to debug this issue. Could you create a repro of this on Code Sandbox? Thanks!

[steve-snow]

I will try to create a repo, but may not happen until this weekend. Steve

…

On Mon, Jan 31, 2022 at 7:57 AM Luna Ruan ***@***.***> wrote: @RobIsHere <https://github.com/RobIsHere> Thanks for commenting! Unfortunately, without a reproducible repro on our side, we're unable to debug this issue. Could you create a repro of this on Code Sandbox? Thanks! — Reply to this email directly, view it on GitHub <#23202 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIJGYZH5JM6SB3MZGU4QLHDUY2WNNANCNFSM5M7B2JVQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were assigned.Message ID: ***@***.***>

[lunaruan]

Thanks so much! That would be a huge help 😊

[ariccio]

I've been seeing this a lot myself lately! It looks like others have been seeing variations of it too:
#21527
#21529
#21534
#21563
#21568
#21636
#21653
#21755 (FYI I'm running 4.23.0)
#21764
#22611

For a bug like this, maybe we need some better diagnostics? I can't identify any individual change in my code that made this happen.

[steve-snow]

This is going to take a bit more work to find the culprit.
Starting with the basic react app and adding yup and formik did not cause the fatal crash with the syntax error trigger. You will see the same yup error. So I'll be iterating through the package.json differences until I get something that blows it up. For now, this is the starting point. But it is not the fatal error I was hoping to find.

Specifically, the syntax trigger was to change the following in the schema file:

age: Yup.number()

to

age: Yup.int()

https://github.com/steve-snow/react-validation-glitch-testing.git

[gibin-george-supersourcing]

The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26448:43
at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24400:22)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24566:14
at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54300:39)

[kux888]

Everything was normal until today