Open spolesciuc opened 2 years ago
lunaruan
commented
2 years ago Hey! Thanks for reporting this issue, and I'm really sorry you encountered it. However, without a repro case we're not able to address this. Could you create a codesandbox or a create-react-app repro case for us so we can debug and fix your issue? Thanks!
prabhg
commented
2 years ago I believe this is the same issue as reported in RN Debugger GH: https://github.com/jhen0409/react-native-debugger/issues/668
muhammadRooman
commented
2 years ago i am facing this issue please guide me whats a problem in my devtools.............
................................................. Uncaught Error: Cannot add node "1" because a node with that id is already in the Store.
The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26229:41 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)
afilp
commented
2 years ago I have the same issue, any ideas what should we do? Thanks a lot.
vijaynyaya
commented
2 years ago le même problème.
Uncaught Error: Cannot add node "1931" because a node with that id is already in the Store.
x1unix
commented
2 years ago I have the same issue in my project
Uncaught Error: Cannot add node "1" because a node with that id is already in the Store.
rudriken
commented
2 years ago I'm also having the same problem.
bwhitt
commented
2 years ago Same issue for me - RN v0.64.3 RND v0.12.1
jonoise
commented
2 years ago I see this issue is recent. Idk what the outcome of this will be, but I've avoid getting this error.
check if you are mapping an array making use of its index param to set it as key prop.
ar.map((obj, index) => ... )if so, try to avoid it. dont use index as key. give your object an id or other kind of unique identifier as key prop.
MalinnaLeach
commented
2 years ago I am facing this same issue, I have upgraded both react-devtools and react-devtools-core to 4.23.0, and we are not using index as a key anywhere in our codebase.
MalinnaLeach
commented
2 years ago OK, I have fixed this for myself by adding this into our package.json:
"resolutions": { "react-devtools-core": "4.14.0" },
I found the solution in this thread: https://github.com/jhen0409/react-native-debugger/issues/620
oldskoolfan
commented
2 years ago thank you @MalinnaLeach you helped me as well
NaingLinnKyaw
commented
2 years ago Repro steps
"react": "17.0.2", "react-native": "0.66.3", "react-devtools": "^4.22.0", "@react-navigation/devtools": "^6.0.5", "@react-navigation/bottom-tabs": "^6.1.0", "@react-navigation/core": "^6.1.1", "@react-navigation/elements": "^1.3.0", "@react-navigation/native": "^6.0.7", "@react-navigation/native-stack": "^6.3.0", "@react-navigation/routers": "^6.1.0", "@react-navigation/stack": "^6.1.0",
How often does this bug happen?
Every time
DevTools package (automated)
react-devtools-core
DevTools version (automated)
4.14.0-d0ec283819
Error message (automated)
Cannot add node "1" because a node with that id is already in the Store.
Error call stack (automated)
at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:140545 at c.emit (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:89515) at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:90986 at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347787 at Array.forEach (<anonymous>) at S.Gc.e.onmessage (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347771) at S.n (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:40:3009) at S.emit (events.js:315:20) at e.exports.P (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:9318) at e.exports.emit (events.js:315:20) at e.exports.dataMessage (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:15409) at e.exports.getData (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:14651) at e.exports.startLoop (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:12066) at e.exports._write (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:11421) at doWrite (_stream_writable.js:403:12) at writeOrBuffer (_stream_writable.js:387:5)Error component stack (automated)
No response
GitHub query string (automated)
https://api.github.com/search/issues?q=Cannot add node because a node with that id is already in the Store. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react ```help
rgomezp
commented
2 years ago Also facing this issue
gaearon
commented
2 years ago We can't help without a reproducing case.
Please only add a comment if you can provide one. Thanks!
jlordi70
commented
2 years ago I am also having this issue. Steps I used to reproduce:
Here is my repository: https://github.com/jlordi70/ReactNativeDebuggerIssue.git Other than the port patcher, I have not changed any code.
Please let me know if you need any other information.
Thank You In Advance!
adipascu
commented
2 years ago This is happening to me while having import 'react-devtools' in the app and running it in Google Chrome while it has the React Dev Tools extension installed.
Seems like having two devtool instances attached to the same app is also causing this bug.
lunaruan
commented
2 years ago For those of you on React Native with this issue, this could be because your DevTools backend in React Native (react-devtools-core) is incompatible with the React DevTools front end. Could you upgrade (or downgrade) the two so that the versions match and see if you can reproduce this issue?
We have a PR out that warns if the DevTools backend and front end versions mismatch, but it's only available as of v4.24.3 so you might not see if it you are on older versions.
zhangsenhua
commented
2 years ago I'm also having the same problem.
erquhart
commented
2 years ago Guessing a lot of folks are commenting without a repro because the debugger is linking to this issue with instructions to add a comment in large bold font, easy to miss the rest about providing a repro case and it's a confusing bug.
For React Native npm users that can't use the resolutions workaround mentioned elsewhere (only works for yarn), try installing the devtools and core direct in your project (not global):
npm install --save-dev react-devtools@4.14.0 react-devtools-core@4.14.0It's possible you may only need the core package, but installing both didn't hurt for me.
jlordi70
commented
2 years ago Guessing a lot of folks are commenting without a repro because the debugger is linking to this issue with instructions to add a comment in large bold font, easy to miss the rest about providing a repro case and it's a confusing bug.
For React Native npm users that can't use the resolutions workaround mentioned elsewhere (only works for yarn), try installing the devtools and core direct in your project (not global):
npm install --save-dev react-devtools@4.14.0 react-devtools-core@4.14.0It's possible you may only need the core package, but installing both didn't hurt for me.
I tried that and it still did not work.
I provided a repo above: https://github.com/jlordi70/ReactNativeDebuggerIssue.git
Package,json file ... "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.67.0", "react-devtools": "^4.14.0", "react-devtools-core": "^4.14.0", "react-native-port-patcher": "^1.0.4", "react-test-renderer": "17.0.2" },
jlordi70
commented
2 years ago @lunaruan There is a repo that I was getting the issue on. I am hoping you can look at this. Thanks In Advance.
akhilbellam95
commented
2 years ago Guessing a lot of folks are commenting without a repro because the debugger is linking to this issue with instructions to add a comment in large bold font, easy to miss the rest about providing a repro case and it's a confusing bug.
For React Native npm users that can't use the resolutions workaround mentioned elsewhere (only works for yarn), try installing the devtools and core direct in your project (not global):
npm install --save-dev react-devtools@4.14.0 react-devtools-core@4.14.0It's possible you may only need the core package, but installing both didn't hurt for me.
I am also facing the same issue Tried the above solution
lunaruan
commented
2 years ago @jlordi70 I tried to reproduce the issue with your repro case but I couldn't. Could you manually upgrade both your react-devtools package as well as the react-devtools-core dependency (in node_module, which the react-native package needs) to 4.24.0 and see if this fixes your issue?
pavelgronsky
commented
2 years ago Hey everyone!!!
dmitryou
commented
2 years ago In my case reinstalling of react-native-debuger to newer version solved the issue
Homebrew 2.6.0 and higher brew reinstall --cask react-native-debugger
If you face permission issue, just remove debugger manually and reinstall
kamranayub
commented
1 year ago This is new as of either 4.27.0 or 4.27.1 as I haven't changed any code in the repo since Nov 18 when I was using 4.26.1 to record a course. You can see a snapshot preview site here where there are issues.
Specifically, this issue seems to be random -- I only saw it once, but I think it's due to the devtools not loading immediately and timing out.
To reproduce:
I recorded a clip because it's BONKERS to try and describe 😄
https://user-images.githubusercontent.com/563819/207508254-6bd10f70-2016-4e8a-b3d7-35140f6d7004.mp4
DevTools greyed out initially (not always the case but happens during the video)
And when it does work, I started seeing another issue while debugging the app (couldn't repro in video):
I noticed if I click the React extension icon a few times with the developer tools open, it loads much faster and doesn't time out 🤔
I am using CRA with Chrome Devtools, no RN at all.
As for the root cause, I don't know exactly but if I had to bet 💰 then my bet is on this (big PR, new feature, device storage related, possible async/timeout issues): https://github.com/facebook/react/pull/25452
edit: I looked around at the commits/PRs and did some limited testing but I'm not so sure now, maybe it was introduced elsewhere.
Hope that helps @gaearon!
I can confirm on my separate Chrome profile using 4.25.0 everything is working, so I will plan to revert to that in the meantime.
kamranayub
commented
1 year ago Now that I see it, between 4.25.0 and 4.27.1, there was an update to the V3 manifest:
https://github.com/facebook/react/commit/6dbccb92493c3a4fea14b6832ceb4ac42e6330c1 (PR https://github.com/facebook/react/pull/25145)
That could explain the issue.
For now I am using unpacked 4.25.0, from crx4chrome.
MarthL
commented
1 year ago OK, I have fixed this for myself by adding this into our package.json:
"resolutions": { "react-devtools-core": "4.14.0" },I found the solution in this thread: jhen0409/react-native-debugger#620
In my case this solution has worked for me
tayrotayro
commented
1 year ago I got this error but I turned off the extension, closed the browser, reopened the browser, turned the extension back on, and then it worked!
Connor-Bernard
commented
1 year ago I was able to replicate this error iff I opened my developer menu in Chrome on the test site.
Closing the developer panel and refreshing got rid of the issue
kamranayub
commented
1 year ago Still happening with 4.27.7. Besides the not showing right away (opening/closing the dev tools fixes this), it was working for about an hour and a half. Came back tonight (6 hours later) and now it won't work, it just times out on every single inspected component. I didn't do anything between then and now. So it's weird that it starts to happen over time suggesting some kind of leak.
PS. I'm not alone it seems
This might just warrant a new issue to decouple it from React Native since these are from the Chrome web store review section.
Repro steps
"react": "17.0.2", "react-native": "0.66.3", "react-devtools": "^4.22.0", "@react-navigation/devtools": "^6.0.5", "@react-navigation/bottom-tabs": "^6.1.0", "@react-navigation/core": "^6.1.1", "@react-navigation/elements": "^1.3.0", "@react-navigation/native": "^6.0.7", "@react-navigation/native-stack": "^6.3.0", "@react-navigation/routers": "^6.1.0", "@react-navigation/stack": "^6.1.0",
How often does this bug happen?
Every time
DevTools package (automated)
react-devtools-core
DevTools version (automated)
4.14.0-d0ec283819
Error message (automated)
Cannot add node "1" because a node with that id is already in the Store.
Error call stack (automated)
Error component stack (automated)
No response
GitHub query string (automated)