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)

[viveksinha121]

Getting this issue too. Tried this:

`public hotelsarray: any[] = [];`

<ion-list [virtualScroll]="hotelsarray" approxItemHeight="50px">
      <div tappable ion-item *virtualItem="let hotel" class="item-inner-hotel" (click)="hotelClicked(hotel)">

[Kevin-Hamilton]

@manucorporat I believe the source of this particular bug is a race condition between requestAnimationFrame and ngOnDestroy.

ngOnDestroy nulls out _nodes, _cells, _date, etc. at https://github.com/ionic-team/ionic/blob/master/src/components/virtual-scroll/virtual-scroll.ts#L819 but there are scheduled raf calls in renderVirtual and in _dom.read() / _dom.write() which might execute after ngOnDestroy has free'd those object properties.

[danielcrk]

Getting this as well. Has anyone found a workaround?

[manucorporat]

fixed! 88b2e83

[Kevin-Hamilton]

I'm not so sure that commit fixes this bug.

I still see the exact same use of, for example, data.topCell being accessed here: https://github.com/ionic-team/ionic/blob/88b2e8316dad5c504695405fa2199aacbea5b5d6/src/components/virtual-scroll/virtual-scroll.ts#L552 without any prior checks to verify data is not null. And I still see data being set to null here: https://github.com/ionic-team/ionic/blob/88b2e8316dad5c504695405fa2199aacbea5b5d6/src/components/virtual-scroll/virtual-scroll.ts#L820 without cancelling the scheduled requestAnimationFrame that wraps the aforementioned access of data.topCell.

Maybe I'm missing something. @masimplo which of your code changes did you think addressed this bug?

[masimplo]

@Kevin-Hamilton I will have to check and get back to you as I can't remember from the top of my head. I do remember that this error was triggered in a couple situations, maybe yours is different. Are you starting with a null collection or nulling the collection at some other point?

Maybe it is a good idea to cancelRaf on ngOnDestroy anyway for race conditions. Will see what I can do. Which ionic version are you using so I can create a bundle for you to try?

[pavini]

I´m getting the same error "VirtualScroll Can't read property length of null"
Ionic 3.13.2

No resolution for this bug?

[masimplo]

@pavini this PR will probably be solving your issue. #13107

[UnderTheMoonspell]

I'm getting this error with just a simple test array:

home-container.html
<ion-list [virtualScroll]="testArray" approxItemHeight="'100px'"> <ion-item *virtualItem="let test"> {{article.title}} </ion-item> </ion-list>

home-container.ts

export class HomeContainer { testArray = [{title:'a'}, {title: 'b'}]; constructor() { } }

In this same home-container I am using an input array (received from an Observable from the parent container) and it works normally with *ngFor. With virtualScroll not even that simple testArray works.

[suryabhanbarai]

@UnderTheMoonspell
Assign array like:-
public items: any[] = [];
and in constructor() {
items = [{title:'a'}, {title: 'b'}];
}
will fix the issue.

[UnderTheMoonspell]

@suryabhanbarai it didn't.

The only element inside ion-list is

<div class="virtual-last"></div>

[therealchrif]

I NEED HELP PLEASE!

I am loading data from .json file:

This is home.ts file

and here is the home.html file

The error

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#279