Nativescript: crash in flexbox-layout.android.js - Right-hand side of 'instanceof' is not an object

[madmas]

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):

• CLI: 6.7.8
• Cross-platform modules:
• Android Runtime: 6.5.3
• iOS Runtime: 6.5.2
• Plugin(s):

Describe the bug

We get the following exception in our app after the state in a controller changes a DockLayout if hidden by an ngIf and a StackLayout is shown as the ngIfbecomes true. That mechanism has been working for weeks now, I'm confused it occurs now.
It happens with android only.

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onSelectedPositionChange failed
System.err: TypeError: Right-hand side of 'instanceof' is not an object
System.err: 
System.err: StackTrace:
System.err: (file: node_modules/@nativescript/core/ui/layouts/flexbox-layout/flexbox-layout.android.js:14:0)
System.err:     at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/properties.js:1065:0)
System.err:     at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/properties.js:992:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:647:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:278:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:232:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:234:0)
System.err:     at push.../node_modules/@nativescript/core/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:925:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:233:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:234:0)
System.err:     at push.../node_modules/@nativescript/core/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:925:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:233:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:234:0)
System.err:     at push.../node_modules/@nativescript/core/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:925:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:233:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:234:0)
System.err:     at push.../node_modules/@nativescript/core/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:925:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:233:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:234:0)
System.err:     at push.../node_modules/@nativescript/core/ui/content-view/content-view.js.ContentView.eachChildView(file: node_modules/@nativescript/core/ui/content-view/content-view.js:70:0)
System.err:     at push.../node_modules/@nativescript/core/ui/page/page-common.js.PageBase.eachChildView(file: node_modules/@nativescript/core/ui/page/page-common.js:126:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:925:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:233:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
System.err:     at push.../node_modules/@nativescript/core/ui/page/page.js.Page.onLoaded(file: node_modules/@nativescript/core/ui/page/page.android.js:43:0)
System.err:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.loadView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:456:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._addViewCore(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:451:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._addView(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:437:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/frame.js.FragmentCallbacksImplementation.onCreateView(file: node_modules/@nativescript/core/ui/frame/frame.android.js:700:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/fragment.js.FragmentClass.onCreateView(file: node_modules/@nativescript/core/ui/frame/fragment.android.js:29:0)
System.err:     at push.../node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.js.BottomNavigation.commitCurrentTransaction(file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.android.js:360:0)
System.err:     at push.../node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.js.BottomNavigation.changeTab(file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.android.js:374:0)
System.err:     at BottomNavigationBarImplementation.onSelectedPositionChange(file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.android.js:118:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.gen.org.nativescript.widgets.BottomNavigationBar_vendor_105222_32_BottomNavigationBarImplementation.onSelectedPositionChange(BottomNavigationBar_vendor_105222_32_BottomNavigationBarImplementation.java:39)
System.err:     at org.nativescript.widgets.BottomNavigationBar.setSelectedPosition(BottomNavigationBar.java:289)
System.err:     at org.nativescript.widgets.BottomNavigationBar$TabClickListener.onClick(BottomNavigationBar.java:302)
System.err:     at android.view.View.performClick(View.java:7259)
System.err:     at android.view.View.performClickInternal(View.java:7236)
System.err:     at android.view.View.access$3600(View.java:801)
System.err:     at android.view.View$PerformClick.run(View.java:27892)
System.err:     at android.os.Handler.handleCallback(Handler.java:883)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:100)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
JS: Error:  *** NativeScriptError *** : Error: Calling js method onSelectedPositionChange failed
JS: TypeError: Right-hand side of 'instanceof' is not an object
JS: Error:  *** StackTrace *** : (file: node_modules/@nativescript/core/ui/layouts/flexbox-layout/flexbox-layout.android.js:14:0)
JS:     at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/properties.js:1065:0)
JS:     at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/properties.js:992:0)
JS:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:647:0)
JS:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:278:0)
JS:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase.onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:232:0)
JS:     at push.../node_modules/@nativescript/core/ui/core/view/view.js.View.onLoaded(file: node_modules/@nativescript/core/ui/core/view/view.android.js:249:0)
JS:     at (file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75)
JS:     at push.../node_modules/@nativesc...
JS: Error:  *** NativeScriptError *** : com.tns.NativeScriptException: Calling js method onSelectedPositionChange failed
JS: TypeError: Right-hand side of 'instanceof' is not an object

Interesting thing is that the view where this occurs does not use the flexlayout at all.

To Reproduce

(currently trying to reproduce it in a minimal sample)

Expected behavior

No crash

Sample project
WIP

[rigor789]

This block seems wrong
https://github.com/NativeScript/NativeScript/blob/02dd5ac96513d6922b0dcb5c4c189cf1a65c9aae/nativescript-core/ui/layouts/flexbox-layout/flexbox-layout.android.ts#L17-L29

The compiled version is invalid - and it's what throws. However, unsure when this is called, as you said you are using a DockLayout and a StackLayout.

var widgetFlexboxLayout;
var widgetLayoutParams;
function makeNativeSetter(setter) {
    return function (value) {
        var nativeView = this.nativeViewProtected;
        var lp = nativeView.getLayoutParams() || new widgetLayoutParams();
        if (lp instanceof widgetLayoutParams) {
            setter(lp, value);
            nativeView.setLayoutParams(lp);
        }
    };
}

[madmas]

@rigor789 thanks a lot for your reply - does this mean the currently available version / dependency is broken?

We found a weird way out of this.
We were using

import { Device } from "@nativescript/core";

to access Device.uuid .

After changing this to

import * as platform from "@nativescript/core/platform";

and using platform.device.uuid, the crash does not occur anymore. Remarkably used in a completely different component that was not use when the crash happens.

I'm confused :-(

[madmas]

@rigor789 I look into previous version and it seems like that file did not change in that regard since "@nativescript/core": "6.2.0",

[rigor789]

Yeah, I'm not too sure about it - that part has been in there for about 3 years without changes.

[SachindeepRedsky]

Go to @nativescript/core/ui/layouts/flexbox-layout/flexbox-layout.android.js

Replace:

var widgetFlexboxLayout;
var widgetLayoutParams;

with

let widgetFlexboxLayout= org.nativescript.widgets.FlexboxLayout;
let widgetLayoutParams= org.nativescript.widgets.FlexboxLayout.LayoutParams;

[rigor789]

@SachindeepRedsky that is indeed what's missing, and looking at the TS source - it's supposed to be set here:
https://github.com/NativeScript/NativeScript/blob/02dd5ac96513d6922b0dcb5c4c189cf1a65c9aae/nativescript-core/ui/layouts/flexbox-layout/flexbox-layout.android.ts#L84-L93

I find this a little weird - we need to move this assignment into a function and call it before trying to access those vars.

[rigor789]

I have implemented a fix on our rc branch in version @nativescript/[email protected]

[madmas]

Great to see the fix for this being included in 7.0.0! Thank you! But is there an explanation why this occured and seemed to be related to the import of Device import { Device } from "@nativescript/core"; ?

[rigor789]

@madmas I'm not sure how that import would cause the issue - I would say it's unrelated or a coincidence maybe. The offending code was the makeNativeSetter method that relied on a FlexboxLayout's constructor for it's variables. This method isn't exported, but is attached to the View prototype https://github.com/NativeScript/NativeScript/blob/02dd5ac96513d6922b0dcb5c4c189cf1a65c9aae/nativescript-core/ui/layouts/flexbox-layout/flexbox-layout.android.ts#L31-L35

So my guess is that one of those properties was set on one of your views (could be set by a plugin or css) - making the call to the function returned by makeNativeSetter before any FlexboxLayout's constructor was called - ending up with undefined on the right-hand side of the instanceof call.

[madmas]

@rigor789 thanks a lot for the explanation

[mircopolo]

@NathanWalker. Any workarounds for this in a "@nativescript/angular": "~8.21.0" "@nativescript/core": "~6.4.0" application?

I migrated a project from "@tns-core-module": "~6.4.0" s to "@nativescript/core": "~6.4.0" in preparation for future upgrades, updated imports and am seeing this issue on few android devices.

Everything is importing from '@nativescript/core' now except for a few deep imports I couldn't see any way to avoid in @nativescript/core 6.4.X such as
import { alert } from '@nativescript/core/ui/dialogs';