JS Interop exception occurs when choosing any pic.

[SarahFathy]

Hello, First, I would like to thank u for the great effort of Blazor cropper, it's very helpful tool. But, I want to share an exception that occurred when tried to use it. the exception is listed below.

Also some additional information for investigation:

1. It was working fine on .Net5 but I upgraded to .Net6 and VS 22
2. I use Chronos.Blazor.Cropper 1.2.5
3. I use blazor server as shown in the exception.

Your help is much appreciated. Have a great day!

Exception: blazor.server.js:1 [2022-06-21T13:29:16.639Z] Error: Microsoft.JSInterop.JSException: Could not find 'rmCropperEventListeners' ('rmCropperEventListeners' was undefined). Error: Could not find 'rmCropperEventListeners' ('rmCropperEventListeners' was undefined). at https://localhost:44342/_framework/blazor.server.js:1:497 at Array.forEach () at i.findFunction (https://localhost:44342/_framework/blazor.server.js:1:465) at E (https://localhost:44342/_framework/blazor.server.js:1:2606) at https://localhost:44342/_framework/blazor.server.js:1:3494 at new Promise () at kt.beginInvokeJSFromDotNet (https://localhost:44342/_framework/blazor.server.js:1:3475) at https://localhost:44342/_framework/blazor.server.js:1:72001 at Array.forEach () at kt._invokeClientMethod (https://localhost:44342/_framework/blazor.server.js:1:71987) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Blazor.Cropper.Cropper.DisposeAsync() at Microsoft.AspNetCore.Components.RenderTree.Renderer.g__GetHandledAsynchronousDisposalErrorsTask|64_0(Task result)

[istvanore]

Hi @SarahFathy

I'm having a similar error, could tell me how you solved it? It looks like there was no commit related to this issue.

Thanks in advance!

[Chronostasys]

Hi @SarahFathy

I'm having a similar error, could tell me how you solved it? It looks like there was no commit related to this issue.

Thanks in advance!

Hi @istvanore , could you provide a minimum sample project?

[adampanger]

Hey! So we found out that the problem occurs only if you extend the Cropper component by creating a new razor component and using the @inherits way. If you subclass the Cropper in a .cs file, it works fine. Here's a little sample project with both versions. https://github.com/adampanger/CropperTest

[Chronostasys]

Hey! So we found out that the problem occurs only if you extend the Cropper component by creating a new razor component and using the @inherits way. If you subclass the Cropper in a .cs file, it works fine. Here's a little sample project with both versions. https://github.com/adampanger/CropperTest

Hi @adampanger , thanks for sharing.
I think it's a different issue. The origin issue's stacktrace indicates that the blazor runtime cannot find some javascript functions. In your case, @inherits is working fine, you are getting exceptions because the subcomponnet overrides all the base component's markups (you could find some discussions about this behavior in this issue). You need to add an extra code block like below to force the subcomponent render the basecomponent's markups:

@{
    base.BuildRenderTree(__builder);
}

[adampanger]

Ohh sorry then, you're right. That snippet you shared is something I wasn't aware of. Thanks for the info.