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:is

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.

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

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.

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/components@5.3.21 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.

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?

I got this error using react-devtools 4.24.1.

Reinstalling npm install react-devtools@4.2 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).

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 react-devtools@4.7.0 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!

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.

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 react-devtools@4.7.0. 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: