core 8.2.0-alpha.1+ : Binding: Run-time error occured in file: undefined at line: undefined and column: undefined

Issue Description

When installing @nativescript/core 8.2.0-alpha.1 and newer (also latest 8.2.0-alpha.9), I see many binding errors in the console in Android and iOS.

CONSOLE ERROR: Binding: Run-time error occured in file: undefined at line: undefined and column: undefined

Mostly it happens when using nested bindings. Some of the occurencies of this error I am not able to explain or to reproduce, but at least I can reproduce it in one scenari with RadListView.

Let’s assume this layout in XML:

<lv:RadListView items="{{ items }}">
        <lv:RadListView.itemTemplate>
            <StackLayout padding="15">
                <Label text="{{ 'id: ' + id }}"/>
                <Label text="{{ 'name: ' + name }}"/>
                <Label text="{{ authorInfo.name, 'author name: ' + authorInfo.name }}"/>     <!-- is causing the error message -->
            </StackLayout>
        </lv:RadListView.itemTemplate>
</lv:RadListView>

And I have this binding context of the page: (just some dummy data…)

export const vm = fromObject({
  items: new ObservableArray([
    { id: 1, name: "Item 1", authorInfo: { id: 999, name: "Firstname Lastname"} },
    { id: 2, name: "Item 2", authorInfo: { id: 999, name: "Firstname Lastname"} },
    { id: 3, name: "Item 3", authorInfo: { id: 999, name: "Firstname Lastname"} },
    ...
  ])
});

then I see this error message when initially loading the page and when scrolling the list.

The error message is caused by this: <Label text="{{ authorInfo.name, 'author name: ' + authorInfo.name }}"/>

When removing the static string in that Label’s text and do something like this: <Label text="{{ authorInfo.name }}"/> then the error message does not appear.

Note that this issue does NOT happen at all with @nativescript/core 8.2.0-alpha.0, only on newer versions.

Reproduction

Get the demo app: ns-binding-issue.zip

Run it -> you will see the error messages in the console.

Relevant log output (if applicable)

CONSOLE ERROR: Binding: Run-time error occured in file: undefined at line: undefined and column: undefined

Environment

not able to run that command for an unknown reason, so here is my package.json content instead:

{ “name”: “ns-binding-issue”, “main”: “app/app.ts”, “version”: “1.0.0”, “private”: true, “dependencies”: { “@nativescript/core”: “^8.2.0-alpha.9”, “nativescript-ui-listview”: “^10.0.2” }, “devDependencies”: { “@nativescript/android”: “^8.2.0-alpha.11”, “@nativescript/ios”: “^8.2.0-alpha.6”, “@nativescript/types”: “~8.1.1”, “@nativescript/webpack”: “~5.0.0”, “typescript”: “~4.3.5” } }

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project’s Code of Conduct

[CatchABus]

@felixkrautschuk Your problem is related to expressions. Old expression parser was null-safe according to README here: https://www.npmjs.com/package/polymer-expressions, therefore it was completely silent in such cases.

Thanks to your old feedback, my latest changes included an undefined-safe mechanism in cases where the XML caller is undefined (caller could be customObject in your case) and perhaps I’ll add a check for null values as well.

So how could this be taken care of using new parser? The meaning of this rework was to fix old issues, add missing ECMA features, have better error reporting, and stop relying on an abandoned package source altogether.

You can solve such issues using optional chaining. Something like this could take care of warnings. I’m planning to add a check for null callers but optional chaining will also be useful for sub-properties.

<StackLayout visibility="{{ customObject ? 'visible' : 'collapse' }}">
    <Label text="{{ customObject.title }}"/>
    <Label text="{{ 'Title: ' + customObject?.title }}"/>
    <Label text="{{ 'Description: ' + customObject?.description }}"/>
</StackLayout>

Automated null-safety is good but I believe it deprives one of control inside code. For anything related to similar binding issues, perhaps we can create a thread in discord and exchange feedback. Let me know if this solved your problems.

[CatchABus]

@felixkrautschuk Not really. Either way, I have worked on a patch here #9805 that includes a null-safe check which may get rid of your issue.