Argument Exception when adding Editor to a Blazor page

[MarianoJP]

Thank you for a good control; however I have a small problem. When I use the control in another blazor (razor) component page I have no problem. Even if it is in the same manner, using a Modal control to display a pop-up with the MCE editor on it. This one page, my Client Details page for my app, gives me the following error on the developer tools in the browser:

System.ArgumentException: There is no tracked object with id '2'. Perhaps the DotNetObjectReference instance was already disposed. (Parameter 'dotNetObjectId') at Microsoft.JSInterop.JSRuntime.GetObjectReference(:44366/Int64 dotNetObjectId) at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(:44366/JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson) at Object.endInvokeDotNetFromJS (blazor.server.js:1) at e.<anonymous> (blazor.server.js:10) at blazor.server.js:1 at Array.forEach (<anonymous>) at e.invokeClientMethod (blazor.server.js:1) at e.processIncomingData (blazor.server.js:1) at e.connection.onreceive (blazor.server.js:1) at WebSocket.i.onmessage (blazor.server.js:1) endInvokeDotNetFromJS @ blazor.server.js:1 (anonymous) @ blazor.server.js:10 (anonymous) @ blazor.server.js:1 e.invokeClientMethod @ blazor.server.js:1 e.processIncomingData @ blazor.server.js:1 connection.onreceive @ blazor.server.js:1 i.onmessage @ blazor.server.js:1

The page is as follows:

@using TinyMCE.Blazor; 
@using Microsoft.AspNetCore.Identity;
@using System.ComponentModel.DataAnnotations;
@using XManagementPro.Pages.TasksPages;
@using XManagementPro.Pages.CalendarPages;
@inject AuthenticationStateProvider AuthenticationStateProvider
....
<EditForm......
<Editor ApiKey='[MY KEY]'
                                CloudChannel="5"
                                @bind-Value=ContactToEdit.Notes
                                Conf="@editorConf">
                        </Editor>
...

</EditForm>

....

@code{
....
    private Dictionary<string, object> editorConf = new Dictionary<string, object>{
   { "menubar", true },
   { "plugins", "link image code fullpage" },
   { "toolbar", "undo redo | fontselect fontsizeselect | bold italic underline strikethrough subscript superscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent" }
 };
....

}

I have confirmed that the error occurs only on one page and with either Chrome or Edge browsers. Any suggestions would be helpful. Yet on another .razor page I have the exact same implementation of the nuget package and it works without any issue:

.....

 <Editor ApiKey='[My Key]'
                CloudChannel="5"
                @bind-Value=MyNote.LeadsNote
                Conf="@editorConf">
        </Editor>

.....

[exalate-issue-sync[bot]]

Ref: INT-2628

[czirok]

The blazor server is the problem.

Temporary solution:

Copy the Editor.razor and tinymce-blazor.js files into your own project and comment out line 148 of the Editor.razor:

//dotNetRef?.Dispose ();

[MarianoJP]

I removed the Nuget Package, added the Editor.razor and tinymce-blazor.js file and it does seem to resolve the issue. Thank you. Note, I had to include the tinymce-blazor.js in a Githubissues.

Githubissues is a development platform for aggregating issues.