Nativescript: Error: View not added to this instance. View: StackLayout(113) CurrentParent: undefined ExpectedParent: AbsoluteLayout(168)

[SephReed]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.4.0 version and is up to date.
✔ Component tns-core-modules has 6.0.0-next-2019-06-04-101739-01 version and is up to date.
✔ Component tns-android has 5.4.0 version and is up to date.
✔ Component tns-ios has 6.0.0-2019-05-16-165318-01 version and is up to date.

Describe the bug

I just want to know what this bug means. What is "this instance"? Why does it expect a parent?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NathanaelA]

First, switch everything back to @latest and verify it fails in stock TNS 5.4.x --- most people are not aware of this but @next is actually master; meaning it can at some times be VERY VERY VERY VERY VERY buggy. So running @next (6.x in your case) can have lots of extra (untested) code that won't actually make it to release.

@next is useful for testing to verify things are still working, but all errors reported really should be ran against @latest; just to make sure it is really a bug that exists; and not some transient error from a bad master that is automatically generated daily... To my knowledge bad builds are not removed, because of the way npm works; so.... :grinning:

So, assuming that is not the cause (that this really is a real issue);

Based on the error message it sounds like you are trying to have this:

-> AbsoluteLayout
   --> StackLayout
      ---> other controls...

The AbsoluteLayout is AWARE of the StackLayout; but the StackLayout does not have the parent connection back to the AbsoluteLayout. Which to me sounds like you were trying to manually wire them rather than using the AddChild function on the AbsoluteLayout, which should setup everything correctly. If you are trying to manually wire it up by setting parent and child values directly and bypass the addChild (or any other registration type functions); DON'T!!! , you will miss way too many things that will cause weird errors later on, and shoot yourself in the foot. :grinning:

If you are using addChild; and you are getting this error in 5.4; you might post some sample code (or create a playground test app) that shows the error. Hard to know exactly why it is failing without more concrete information. :grinning:

[SephReed]

So, I managed to figure out the ish-root cause of the error, and it was that I somehow had a reference to a view that was no longer part of the current overall render. I was holding onto this view without it being part of the app, and then adding it using addChild();

This is the offending code:

public view(className: string, getView: (val: TYPE) => View): View {
    const absLay = new AbsoluteLayout();
    absLay.className = className;
    this.observe(() => {
        absLay.removeChildren();
        const addMe = getView(this.value);
        if (addMe) {
            if (addMe.parent) {
                addMe.parent._removeView(addMe);
            }
            absLay.addChild(addMe);
        }
    });
    return absLay;
}

I ended up just wrapping the whole thing in a try catch and ignoring that particular error. It only happens when I update css.

[NathanaelA]

@SephReed - If I understand the gist of that bit of code; you really should be using removeChild(addMe) instead of _removeView(addMe) as you are missing the rest of the removal of the code which is leaving the prior parent in an unknown state. You will probably have other rendering / crashing issues later, if you continue to do it this way...

[SephReed]

The removeChild code is actually the bit I added that fixed part of the issue. I'll update it to use the safer version though. It's definitely not my normal style to use private functions.