Javascript error: TypeError: Converting circular structure to JSON

[edhalsim]

Hi,

I have an image defined as:
<img id="imagemap" class="hidden" src="@Image64" @onload="OnImageMapLoaded">

When I click a button, I'm setting the value for Image64 at which time the onload method fires:

protected async Task OnImageMapLoaded(ProgressEventArgs eventArgs)
{
    if (!string.IsNullOrEmpty(Image64))
    {
        await jsRuntime.InvokeVoidAsync("eval", "myimage = document.getElementById('imagemap')");

At this point I'm getting an error in the JS Console (F12):
Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HTMLImageElement'
| property '_blazorEvents_1' -> object with constructor 'e'
| property 'handlers' -> object with constructor 'Object'
| property 'load' -> object with constructor 'Object'
--- property 'element' closes the circle
at JSON.stringify ()

If I then go into the F12 console and execute: eval("myimage = document.getElementById('imagemap')"), it returns the element just fine.

This approach worked with the Blazor.Extensions.Canvas library, but not here for some reason. I'm switching because I don't see support for getImageData in the other library.

Any help would be appreciated as I'm sure it's something I'm doing. Thanks.

[edhalsim]

I added "var" as in await jsRuntime.InvokeVoidAsync("eval", "var myimage = document.getElementById('imagemap')"); and now it works. Go figure.

[Stefan Lörwald]

Great that you were able to figure this out! The issue here is that blazor tries to return the value to C# (even though we use InvokeVoidAsync, the serialization is still happening in JS, which in my opinion is a mistake). A DOM element contains references to parents and children (which in turn contain a parent), so there are circular references which it trips up on.

Adding var changes the return value of the entire expression under eval, so there's no DOM element to be serialized.

[Stefan Lörwald]

For reference, this is the actual issue: dotnet/aspnetcore#16632