Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot read property 'offsetWidth' of null #2

Open
bardobrado opened this issue Mar 11, 2021 · 5 comments
Open

TypeError: Cannot read property 'offsetWidth' of null #2

bardobrado opened this issue Mar 11, 2021 · 5 comments
Assignees
Labels
bug Something isn't working
Milestone

Comments

@bardobrado
Copy link

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
Copy link

thebestgin commented Jun 25, 2021

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
Copy link

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 added a commit that referenced this issue Sep 28, 2021
@jonasgeiler
Copy link
Owner

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
Copy link

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

@jonasgeiler jonasgeiler added the bug Something isn't working label Feb 12, 2024
@jonasgeiler jonasgeiler self-assigned this Feb 12, 2024
@jonasgeiler jonasgeiler added this to the 2.0.0 milestone Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants