VirtualScroll Can't read property length of null

[aggarwalankush]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I got Null exception at https://github.com/driftyco/ionic/blob/master/src/components/virtual-scroll/virtual-scroll.ts#L601

Expected behavior:
Check for null before calling length function

Steps to reproduce:

Don't know how to reproduce. Got it only a few times.

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

[manucorporat]

@aggarwalankush this._nodes should never set to null during runtime, can you provide some source code that reproduces the issue?

[aggarwalankush]

Happened few times only. Don't know how to reproduce. Closing this as there are other important issues than this one.

[ADCJustinH]

This happens for me after upgrading to ionic 3.

Closing this as there are other important issues than this one.

Issues can be prioritized I don't think you should have closed this just because other issues exist...

filteredCourses: ICourseResult[];
ngOnInit() {
        this.cSrv.getNearbyCourses(this.nearbyCount)
            .first().subscribe(courses => {
                this.filteredCourses = courses;
            });
    }

<ion-list [virtualScroll]="filteredCourses" approxItemHeight="85px">

gets the exception every time for me. It happens If I change this around to use the async pipe too. The only fix is to change the first line to:
filteredCourses: ICourseResult[]=[];

which is not a great solution because I don't know how many times this pattern is used in my app and I'll probably miss one or two :/

[manucorporat]

@ADCJustinH I think you have a different issue, this time: this._nodes is null.
Which version are you using? make sure you update to 3.1.1

[ADCJustinH]

@manucorporat Thanks for taking a look. I am indeed using 3.1.1 but the stack is slightly different:

> virtual-scroll.js:535 Uncaught TypeError: Cannot read property 'length' of undefined
>     at VirtualScroll._stepDOMWrite (virtual-scroll.js:535)
>     at virtual-scroll.js:496
>     at dispatch (dom-controller.js:214)
>     at DomController._flush (dom-controller.js:158)
>     at rafCallback (dom-controller.js:147)

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

and yes, the C in cordova is missing in the console output lol

[aggarwalankush]

@manucorporat I am getting the similar error again but now for set property.

TypeError: Cannot set property 'length' of null
      at VirtualScroll.readUpdate (....

[pantonis]

same here. I get:

Cannot read property 'length' of null
    at VirtualScroll._stepDOMWrite (virtual-scroll.js:591)
    at virtual-scroll.js:551
    at dispatch (dom-controller.js:214)
    at DomController._flush (dom-controller.js:158)
    at rafCallback (dom-controller.js:147)

after I updated from 2.2.0 to 3.3.0

[pantonis]

@ADCJustinH Tried your workaround to change filteredCourses: ICourseResult[]=[]; but doesnt work either.

[pablomaurer]

Here are my tests using 3.4.2

• Init: with empty array works
• Init: with null gives: Cannot read property 'length' of null at VirtualScroll._stepDOMWrite VirtualScroll Can't read property length of null #11439
• Clear: array via same reference works. this.items.splice(0,this.items.length)
• Clear: array via new reference, gives no error, but all previous rendered items will still be visible, although they should get destroyed. Issue Virtual Scroll does not clear elements when items are cleared and throws error #12034 / PR fix(virtualScroll) remove items if array is null #12134
• Add/Remove Item: array with same reference works.
• Add/Remove: array with new reference works.
• Sort: array with same reference works.
• Sort: array with new reference works.
• Destory: leads to tangling event emitters Virtual scroll destroying rendered components leads to tangling event emitters #12036
• Renderer flickers with every search, same as virtualScroll flashes "wrong" items and in inverse order on init/reinit #12047 Virtual Scroll filtering causes a lot of flicker and performance degradation #12035
• Renderer items overlapping Ionic 2: VirtualScroll items overlapping. Poor rendering on delayed transport #11542
• Rendering ion-img changes tounloaded even they are still in viewport [bug] ion-slide-box in nightly-2037 #1326
• ngIf: Using virtualScroll inside a *ngIf="items". It will never show up. Conditional on VirtualScroll causes no content to be displayed in any case #9655
• Grid with VS #12133

Oh there is already a huuuge list: #8744

other libs

• https://github.com/rintoj/angular2-virtual-scroll (if data changes you must provide a new array, not updated)
• https://github.com/dinony/od-virtualscroll (everything is an observable)