Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DevTools Bug]: Using different React instances across multiple frames throws errors #26797

Closed
Mesoptier opened this issue May 9, 2023 · 4 comments
Assignees
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug

Comments

@Mesoptier
Copy link

Mesoptier commented May 9, 2023

Website or app

https://codepen.io/mesoptier/pen/qBJopod

Repro steps

  1. Visit the codepen linked above.
  2. Be sure to open the Debug View, so codepen doesn't add any additional iframes (more info).
  3. Observe:
    • Warning in the Console tab: Invalid renderer id "1".
    • Error in the Components tab: Uncaught Error: Cannot add node "3" because a node with that id is already in the Store.
    • After dismissing the error, all components seem to be accounted for (you might need to adjust the "Hide components where..." option).

In my actual application the error pops up for every change in the tree, making the devtools virtually unusable.

Note: This only seems to happen if the iframe is added some time after the initial React tree was mounted in the parent window. When I remove the setTimeout so the iframe is added synchronously, I no longer see any warnings.

Related issues:

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated) (manual)

4.27.7 (5/7/2023) in Google Chrome Version 112.0.5615.165 (Official Build) (64-bit)

Error message (automated) (manual)

Cannot add node "3" because a node with that id is already in the Store.

Error call stack (automated) (manual)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29031:41
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27054:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27223:14
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:57493:39)

Error component stack (automated)

No response

GitHub query string (automated)

No response

@Mesoptier Mesoptier added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels May 9, 2023
@hoxyq hoxyq self-assigned this May 9, 2023
@hoxyq
Copy link
Contributor

hoxyq commented May 12, 2023

Hey @Mesoptier, thanks for reporting this.

Can confirm this issue, but I am getting different error on my side and only when refreshing the page. Extension works as expected for me when I open the page for the first time.

I will put up a fix for this.

hoxyq added a commit that referenced this issue May 12, 2023
…erers (#26807)

## Summary
Initially reported in #26797.
Was not able to reproduce the exact same problem, but found this case:

1. Open corresponding codepen from the issue in debug mode
2. Open components tab of the extension
3. Refresh the page

Received multiple errors:
- Warning in the Console tab: Invalid renderer id "2".
- Error in the Components tab: Uncaught Error: Cannot add node "3"
because a node with that id is already in the Store.

This problem has occurred after landing a fix in
#26779. Looks like Chrome is
keeping the injected scripts (the backend in this case) and we start
backend twice.
@hoxyq
Copy link
Contributor

hoxyq commented May 12, 2023

@Mesoptier can you please also validate this on your side?

You can download a build from our CircleCI pipeline here - https://app.circleci.com/pipelines/github/facebook/react/42301/workflows/8a3dd19a-f9f0-4af2-bd91-b030356bbf98/jobs/684003/artifacts

Chrome extension should be in chrome-extension archive, you can then install it via Load unpacked dialog in chrome://extensions/

@Mesoptier
Copy link
Author

@hoxyq Yes! I'm no longer seeing the warning/errors when I use the build you linked. Thanks for the fix :)

@hoxyq
Copy link
Contributor

hoxyq commented May 15, 2023

@hoxyq Yes! I'm no longer seeing the warning/errors when I use the build you linked. Thanks for the fix :)

Great, thanks for helping resolving this. This will be included in v4.27.8 release, which I will publish this week.

facebook-github-bot pushed a commit to facebook/react-native that referenced this issue May 16, 2023
…erers (#26807)

Summary:
## Summary
Initially reported in facebook/react#26797.
Was not able to reproduce the exact same problem, but found this case:

1. Open corresponding codepen from the issue in debug mode
2. Open components tab of the extension
3. Refresh the page

Received multiple errors:
- Warning in the Console tab: Invalid renderer id "2".
- Error in the Components tab: Uncaught Error: Cannot add node "3"
because a node with that id is already in the Store.

This problem has occurred after landing a fix in
facebook/react#26779. Looks like Chrome is
keeping the injected scripts (the backend in this case) and we start
backend twice.

DiffTrain build for commit facebook/react@67a05d0.

Reviewed By: javache

Differential Revision: D45815160

Pulled By: hoxyq

fbshipit-source-id: 99f3c45009b07a0fb89f0674ccfb24f170cdb29d
EdisonVan pushed a commit to EdisonVan/react that referenced this issue Apr 15, 2024
…erers (facebook#26807)

## Summary
Initially reported in facebook#26797.
Was not able to reproduce the exact same problem, but found this case:

1. Open corresponding codepen from the issue in debug mode
2. Open components tab of the extension
3. Refresh the page

Received multiple errors:
- Warning in the Console tab: Invalid renderer id "2".
- Error in the Components tab: Uncaught Error: Cannot add node "3"
because a node with that id is already in the Store.

This problem has occurred after landing a fix in
facebook#26779. Looks like Chrome is
keeping the injected scripts (the backend in this case) and we start
backend twice.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug
Projects
None yet
Development

No branches or pull requests

2 participants