Error: "Cannot add child "18903" to parent "18774" because parent node was not found in the Store."

[atulSagotra]

Which website or app were you using when the bug happened?

Please provide a link to the URL of the website (if it is public), a CodeSandbox (https://codesandbox.io/s/new) example that reproduces the bug, or a project on GitHub that we can checkout and run locally.

What were you doing on the website or app when the bug happened?

If possible, please describe how to reproduce this bug on the website or app mentioned above:

Generated information

DevTools version: 4.13.1-93782cfed2

Call stack:
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:21447:43
at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19607:22)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19767:12
at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37788:39)

Component stack:
(none)

GitHub URL search query:
https://api.github.com/search/issues?q=Cannot%20add%20child%20%20to%20parent%20%20because%20parent%20node%20was%20not%20found%20in%20the%20Store.%20in%3Atitle%20is%3Aissue%20is%3Aopen%20is%3Apublic%20label%3A%22Component%3A%20Developer%20Tools%22%20repo%3Afacebook%2Freact

[bvaughn]

Hi @atulSuperman!

I'm sorry you ran into this problem 😦

Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce it though. This means that it's going to be very hard for us to fix.

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[jwandekoken]

I am also having this bug

[bvaughn]

@jwandekoken See the comment above please :) Repro is needed.

[TobyMellor]

This happened to me, the node wasn't appearing in the Components tree and I was getting this error. The problem was that my key attribute was way too long

[muhfs94]

suddenly having this issue right now. I thought it was because of my commits, but changing to another old branch just give the same errors.

it was working just fine yesterday, don't know why. maybe due to the devtools update or something?

btw I'm on react 16.8.6, react devtools 4.13.3 (5/19/2021)

[bvaughn]

@muhfs94 Try updating to the latest release (4.13.4) just to rule anything out. But if you're still seeing the issue, then we still need a repro case.

[muhfs94]

@muhfs94 Try updating to the latest release (4.13.4) just to rule anything out. But if you're still seeing the issue, then we still need a repro case.

at first the bug still persists. with same error log. then I retried close the devtools and opened it again (I think I actually have done this as well before) then somehow it works now.

the error log still shows up but at least now all components are showing on the devtools, and that's all I need.

in addition, I found this

and I was trying to hide that component (which has no recent changes on it) to see whether it has any impact. or any component that last showing on the devtools. but for now, that'll be all.

thank you for responding @bvaughn

[bvaughn]

@muhfs94 I appreciate the extra information, but this isn't a description that I can use to reproduce (and fix) the bug. I need an actual website (or code) that I can run along with instructions (like "do this, then this") so I can see the bug.

[HillLiu]

@bvaughn
There are some simple code could help reproduce.

You could try following code sandbox link.
https://jkk1y.csb.app/

The reproduce steps are:

1. "Do not" open develop panel.
2. Go to https://jkk1y.csb.app/
3. Open develop panel and go to react dev tab.
4. Errors was shown.

I guess it's kind of race condition.
When I change the component order such as

     <PageLoadProgressHandler />
    <PopupPool />

It will work perfect.

import React from 'react'; 
import {PopupPool} from 'organism-react-popup';
import {PageLoadProgressHandler} from 'organism-react-progress'; 

const Index = (props)=>
<>
    <PopupPool />
    <PageLoadProgressHandler />
</>

export default Index;

Ps: brief explain what component do.
The PageLoadProgressHandler will dispatch float element to PopupPool.

[bvaughn]

Excellent! Thank you, @HillLiu

Super interesting that this bug only occurs if you wait to open DevTools until after the page has loaded.

[HillLiu]

Super interesting that this bug only occurs if you wait to open DevTools until after the page has loaded.

I think it is because only have two components, I have two sites, one it will always happen, another will random happen.

or maybe code-sandbox do some strange things.

[bvaughn]

This is interesting. The reason DevTools throws is that the Progress Fiber's owner (the _debugOwner attribute) points to a Body Fiber that hasn't been mounted yet. That seems unexpected.

This repro is just a wrapper around two NPM packages. Where's the source code for these packages? :D

Edit I found it, although there's a lot of indirection here. Tracing one package which imports another which imports another. Would be helpful if it were flattened 😁 but I guess I can always step through the bundled source.

[HillLiu]

This repro is just a wrapper around two NPM packages. Where's the source code for these packages? :D

PopupPool:
https://github.com/react-atomic/react-atomic-organism/blob/master/packages/organism-react-popup/ui/organisms/PopupPool.jsx

PageLoadProgressHandler:
https://github.com/react-atomic/react-atomic-organism/blob/master/packages/organism-react-progress/ui/organisms/PageLoadProgressHandler.jsx

Good luck... XD.

[bvaughn]

Interestingly, if I copy the PopupPool, popupStore, and popupDispatcher source files into the sandbox (and only change the import statement in App) the bug goes away. That's surprising.

[bvaughn]

I wonder if I'm running slightly different code? The debug log shows a slightly different tree structure. Is the version of the source you linked me to the same as the one the Sandbox points to in NPM, @HillLiu?

Edit Looks like the repro is using 0.18.8 (released a couple of months ago) but the latest NPM release is 0.11.1. That being said, it doesn't look like the files that are being imported have changed (at least not in source) so I'm still not sure what's up.

[HillLiu]

@bvaughn I change two main components to hook style then get better performance, it reduce the error happen, but I still could get error. Some error is happen after component render done and open the panel same behavior with pervious.

PageLoadProgressHandler.jsx
react-atomic/react-atomic-organism@49b1c6e#diff-d039b6298f0db5bc41a63cde66ce18c16cfec603aff6fffae91487e9b8f67764

DisplayPopupEl.jsx
react-atomic/react-atomic-organism@f119781#diff-1432f1411d92e61abcafccadda54bb5881460d891e548fe5bf58e0d0191143da

I'll log my changes in following issue ticket.
react-atomic/react-atomic-organism#300

[bvaughn]

Would be nice to get a smaller reproduction of this issue (all of the code in one project, rather than spread across many NPM packages). That's what I was trying to do with moving the source but then the bug goes away b'c the code seems to be different.

I noticed one potential difference being the "reshow-runtime/helpers/interopRequireDefault" indirection but I'm not sure how likely that is to be related.

[bvaughn]

Looking at the error while debugging, it looks like the render method of Body creates a Progress element during render and assigns it to this._bar, then either renders it or dispatches a popup event to show it.

I'm not sure why (too sleepy to think it through maybe) but sometimes Progress seems to be mounting before Body has, which goes against an assumption in DevTools. Will dig back in tomorrow.

[bvaughn]

@HillLiu I really appreciate the repro case, but there are so many layers of indirection between the various NPM packages being used to dynamically create the components. It's difficult to trace through.

I'm going to hand this issue to you and ask for a smaller repro case. (Without 10+ NPM projects that each require each other.) Is this something you can help with?

Edit I fixed this (#21562) but the test case I added is not great since it relies on unsupported side effects to trigger the problem case. I'd still love to get a smaller repro so I can (1) be sure I fully fixed the problem and (2) add a regression case so it doesn't get re-introduced.

[bvaughn]

Bugfix released as version 4.13.5

[muhfs94]

thank you @bvaughn fixed on version 4.13.5 👍

[HillLiu]

@bvaughn Thanks your effort.

Your fixed also be success from my side.