Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

[indieza]

Hello,

I got the following error in the console after the execution of the logic after checking is the current item is observed.

Microsoft.JSInterop.JSException: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

I apply the code which I use.

<div @ref="@this.Reference">
    Some data
</div>

public ElementReference Reference { get; set; } = new ElementReference(Guid.NewGuid().ToString());

await ObserverService.Observe(Reference, async (entries) =>
{
    if (entries.FirstOrDefault().IsIntersecting)
    {
        // Login execution
    }
});

Regards,
Simeon Valev

[mythz]

I'm getting this error as well on Blazor WASM on its initial load (no issue with same impl on Blazor Server).

Tracked the issue down to this observeElement() function being passed a `null element:

BlazorIntersectionObserver/src/Ljbc1994.Blazor.IntersectionObserver/src/index.ts

Line 89 in 9e1cde8

item.observer.observe(element);

Although I've logged the element to the dev console, i.e:

js.InvokeVoidAsync("console.log", elementRef)

Before observing it with:

await ObserverService.Observe(elementRef,...)

Where logs show that it always has the element reference, but for some reason it comes across as null in JS function.

[janholb]

I have the same issue, with the same error occuring on blazor WASM and not on blazor server, even if I verify the ElementReference before observing:
public async Task SetupObserver(ElementReference elementRef) { if (elementRef is ElementReference && elementRef != null) { _imageObserver = await ObserverService.Observe(elementRef.Value, (entries) => { //logic }); } }

[axekan]

Has anyone found a solution to this issue? I'm able to reproduce this 100% of the time by changing page just as an observed item is being loaded in. For reference I am using the component version and not the service setup.

[alelom]

Same issue here. In my case, I am experiencing it on Blazor Server.

A pity, I really would love this to work.

[ljbc1994]

Hey, could you provide a minimal working example of this so I can replicate this?

Also, what version of dotnet are you using?

[alelom]

I tested this on NET7, Blazor Server.

A minimal working example is:
Nevermind, I had one that I used to test, upon reopening VS I could not replicate the issue anymore!