TypeError: Cannot read property 'offsetWidth' of null

[bardobrado]

Hello,
I'm getting this error, even that it is working nice, but idk how to fix it. I'm running sapper/firebase

Uncaught (in promise) TypeError: Cannot read property 'offsetWidth' of null
    at isVisible (InfiniteLoading.svelte:145)
    at attemptLoad (InfiniteLoading.svelte:232)
    at scrollHandler (InfiniteLoading.svelte:225)
    at InfiniteLoading.svelte:308

[thebestgin]

I have the same problem.

In my case the error occurs because I add/remove the 'InfiniteLoading' component via {#if items.indexOf(item) == 0} only at the beginning of a Virtual List.

I think the source code should be optimized that way:

function isVisible(element) {
	return element && element.offsetWidth + element.offsetHeight > 0;
}

[whataboutpereira]

I have the same problem.

In my case the error occurs because I add/remove the 'InfiniteLoading' component via {#if items.indexOf(item) == 0} only at the beginning of a Virtual List.

I think the source code should be optimized that way:

function isVisible(element) {
	return element && element.offsetWidth + element.offsetHeight > 0;
}

This also suppresses the error when the component is destroyed with a pending fetch.

Uncaught (in promise) TypeError: element is null
    isVisible InfiniteLoading.svelte:855
    attemptLoad InfiniteLoading.svelte:234
    loaded InfiniteLoading.svelte:187

[jonasgeiler]

Hello there!
Hope this answer isn't too late...

I think this might be an issue with timing 🤔
When the component first renders, it sets thisElement to the container element using bind:this={thisElement}.
Now, if the scroll handler get's triggered BEFORE thisElement is assigned a value, it throws an error.
Not sure if or how this can happen...
Other than that I have no clue why this error occurs 😅
Maybe someone could provide an example code? Or some way for me to reproduce this?

Anyways, I've made @thebestgin suggested changes now. Hope that helps...

[whataboutpereira]

I think this might be an issue with timing 🤔 When the component first renders, it sets thisElement to the container element using bind:this={thisElement}. Now, if the scroll handler get's triggered BEFORE thisElement is assigned a value, it throws an error. Not sure if or how this can happen...

In my case element was destroyed by the time isVisible was called. Thanks for the fix!

[development-vargamarcel]

I had a similar problem,my solution was to display the InfiniteLoading component on demand,meaning:
1.I get first batch of results from api.
2.Bellow i display a button,when clicked will set a viariable (showInfiniteLoading) to true.
3.I display InfiniteLoading component when showInfiniteLoading is true (and also hide the button,because there is no more use for it).