[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

[bvaughn]

Hello everyone!

We are sorry to hear that this issue is affecting several people. It would help us a lot though if your comments contained the following information:

• Which version of React DevTools are you using?
• Which version of React/ReactDOM are you using?
• How can we repro the problem you're seeing? (Give us a URL or a project we can check out or run.)

Without the info above, we can't help you even though we want to.

cc @gibin-george-supersourcing @kux888 @ariccio @RobIsHere

[mrkev]

Unfortunately, I'm seeing this issue at work so I can't share a URL/project. It happens every time I open the tools; they're inaccesible to me at the moment. Will at least share version info in hopes it's useful:

React DevTools: 4.13.5 (6/21/2021)
React: 17.0.2
ReactDOM: 17.0.2

@storybook/[email protected] is installing React/ReactDOM 16 too, although nothing storybook related should end up on the main app bundle.

Chrome doesn't provide much info on chrome://extensions nor a way to export exceptions / stack traces, but if anything here is useful, let me know and I'll share more about it.

[bvaughn]

• React DevTools: 4.13.5 (6/21/2021)

@mrkev Why are you using a year old version of DevTools? :)

[mrkev]

No idea, and the completely fell under my radar haha let me re-install

EDIT: would you look at that, things are working for me again. I'm off to some profiling!

[RobIsHere]

Just checked: my devtools are up to date and I'm seeing the bug. I'm not using any forms libraries but wired it up manually, so formik or whatever like suggested above is probably not the reason. I also tried to create a stripped down app for reproducing this bug, but could not successfully reproduce it.
The very special thing with the app where I'm seeing the bug is that I'm using two different react apps on the same page, one compiled as library and loaded and started inside of the other. Maybe this scenario is not supported?

[lunaruan]

@RobIsHere Hey! This scenario should be supported, though since it's not common there might be an issue with it. Did you try reproducing the bug with the two different react apps? To create a repro case, I would recommend removing chunks of your app until you get a small repro that still shows the bug.

[evangrim]

I got this error using react-devtools 4.24.1.

Reinstalling npm install [email protected] solved my issue. (Also possible a fresh install helped.)

Also FWIW with 4.24.1, I had an issue where react-devtools loaded and seemed to connect but no components displayed (filters were removed).

[moisesrj97]

I am having the same issue when trying to switch the component rendered inside a Suspense.

react-devtools version: 4.24.3-46a98cff2

Demo: https://codesandbox.io/s/amazing-blackburn-k2iql8?file=/src/App.js

[shamilovtim]

Edit: see follow up below

[shamilovtim]

UPDATE: See comment below for full fix and information.

Hello @lunaruan @bvaughn sorry for the tag but I thought I'd comment that I've isolated this issue to a specific DevTools release where it got introduced: between ~~4.13.0...4.13.1~~~ 4.7.0 and 4.8.0 (UPDATE: See comment below,) I'll list our stack and see attached screengrabs for evidence.

ENV INFO:
node is v14.17.3 installed with nvm at /Users/admin/.nvm/versions/node/v14.17.3/bin/node
npm 8.5.5 installed at /Users/admin/.nvm/versions/node/v14.17.3/bin/npm
react: 17.0.2
react-native: 0.65.2 which depends transitively on react-dev-tools-core@^4.6.0 and resolved at "4.13.5"
react-dev-tools: installed with yarn global add [email protected] at /usr/local/bin/react-devtools, which incrementing to 4.8.0 will consistently reproduce errors

Regarding what I've tried. I've tried unlocking the local transitive to latest (4.24.4 or whatever) and installing global 4.24.4. This reproduces the node 161 error message. I've tried almost every version over 4.7.0 and all of them throw errors. I've tried installing those latest versions with npm -g instead of yarn and it didn't help. I've tried using latest react-devtools with node v16 as well as node v13, with react-devtools installed globally inside of each of those particular node versions and that didn't help either.

My conclusion is that despite react-native 0.65.2 specifying a transitive ^4.6.0 the reality is that it only supports 4.7.0 and lower. Given that this is an older version of RN, I doubt that they're going to make a patch release to fix this. So perhaps the ball is in the DevTools team's court to make react devtools > 4.7.0 backwards compatible?

Thanks for reading!

[bvaughn]

Thanks for the follow up info. I suspect 4.13.1 is maybe a bad lead though, in terms of when the bug was "introduced" – because that version included #21426 (which basically made DevTools stop silently swallowing certain types of Store errors). In other words, 4.13.0 (and older) were probably also broken but in a less obvious way.

[shamilovtim]

You're right @bvaughn it was just swallowing the error and neither the profiler tab nor the component tab were working. I've now isolated to no errors whatsoever. I did it by locking react native's transitive react-devtools-core to 4.7.0 (rather than ^4.6.0) and installed global devtools with yarn global add [email protected]. The break happens between react-devtools 4.7.0...4.8.0. I suspect React Native has not locked to the correct transitive version, which is why you guys can't reproduce this. They just need to remove the ^ from their transitive dependency on react-devtools-core in package.json. For backwards compat the fix is probably between those two versions. I'll update my previous comment to point here.

4.7.0 success, both components and profiler working:

[bvaughn]

Interesting! Nice sleuthing.

Things broke in version 4.8? 😮 That release was very small:
https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#480

[lunaruan]

@shamilovtim Wow nice find! I tried reproducing with my local React Native app on v4.8, but I couldn't reproduce the bug. Do you have a link to your app that I can take a look at to see if I can repro on my side?

[shamilovtim]

@shamilovtim Wow nice find! I tried reproducing with my local React Native app on v4.8, but I couldn't reproduce the bug. Do you have a link to your app that I can take a look at to see if I can repro on my side?

Ah sorry @lunaruan but Shipt is closed source. I wonder, did you test on the react native version that was experiencing this problem? We're on 0.65.x. I assume this isn't worth hotfixing, you can probably just have this ticket serve as the solution for people still on older versions.

[kofkgoing]

"react-devtools-core": "4.24.3",
...
"resolutions": {
  "react-devtools-core": "4.24.3"
},

facebook/flipper#3649