Skip to content

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

@Mesoptier

Description

@Mesoptier

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions