Open steve-snow opened 2 years ago
bvaughn
commented
2 years ago 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
commented
2 years ago I can confirm that I have the same issue.
RobIsHere
commented
2 years ago 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
commented
2 years ago @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
commented
2 years ago 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 https://github.com/facebook/react/issues/23202#issuecomment-1025931957, 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
commented
2 years ago Thanks so much! That would be a huge help 😊
ariccio
commented
2 years ago I've been seeing this a lot myself lately! It looks like others have been seeing variations of it too:
https://github.com/facebook/react/issues/21527
https://github.com/facebook/react/issues/21529
https://github.com/facebook/react/issues/21534
https://github.com/facebook/react/issues/21563
https://github.com/facebook/react/issues/21568
https://github.com/facebook/react/issues/21636
https://github.com/facebook/react/issues/21653
https://github.com/facebook/react/issues/21755 (FYI I'm running 4.23.0)
https://github.com/facebook/react/issues/21764
https://github.com/facebook/react/issues/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
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago Everything was normal until today
bvaughn
commented
2 years ago 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:
Without the info above, we can't help you even though we want to.
cc @gibin-george-supersourcing @kux888 @ariccio @RobIsHere
mrkev
commented
2 years ago 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.
bvaughn
commented
2 years ago
- React DevTools: 4.13.5 (6/21/2021)
@mrkev Why are you using a year old version of DevTools? :)
mrkev
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago @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
commented
2 years ago 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).
moisesrj97
commented
2 years ago 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
commented
2 years ago Edit: see follow up below
shamilovtim
commented
2 years ago 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!
bvaughn
commented
2 years ago 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
commented
2 years ago 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:
bvaughn
commented
2 years ago 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
commented
2 years ago @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
commented
2 years ago @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
commented
1 year ago "react-devtools-core": "4.24.3",
...
"resolutions": {
"react-devtools-core": "4.24.3"
},
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)
Error component stack (automated)
No response
GitHub query string (automated)