Editor error thrown: Quill is not defined

[jimspillane]

An error is thrown when opening the Rich Text Editor for the first time or if reloading the page using Empty Cache and Hard Reload. Maybe the quill-interop.js script is not loaded before the CreateEditor interop call is executed.

Exception thrown: 'Microsoft.JSInterop.JSException' in System.Private.CoreLib.dll
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: QuillBlotFormatter is not defined
ReferenceError: QuillBlotFormatter is not defined
    at Object.createQuill (http://localhost:44357/js/quill-interop.js:6:49)
    at http://localhost:44357/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:44357/_framework/blazor.server.js:8:31390)
    at http://localhost:44357/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (http://localhost:44357/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (http://localhost:44357/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (http://localhost:44357/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (http://localhost:44357/_framework/blazor.server.js:1:38091)

Microsoft.JSInterop.JSException: QuillBlotFormatter is not defined
ReferenceError: QuillBlotFormatter is not defined
    at Object.createQuill (http://localhost:44357/js/quill-interop.js:6:49)
    at http://localhost:44357/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:44357/_framework/blazor.server.js:8:31390)
    at http://localhost:44357/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (http://localhost:44357/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (http://localhost:44357/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (http://localhost:44357/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (http://localhost:44357/_framework/blazor.server.js:1:38091)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Oqtane.Modules.Controls.RichTextEditor.OnAfterRenderAsync(Boolean firstRender) in D:\temp\Oqtane.Client\Modules\Controls\RichTextEditor.razor:line 120
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'Ie-x6S-hNCalIyPqBsJknPK9X9iz3PXHCuHPLqb_08o'.

Microsoft.JSInterop.JSException: QuillBlotFormatter is not defined
ReferenceError: QuillBlotFormatter is not defined
    at Object.createQuill (http://localhost:44357/js/quill-interop.js:6:49)
    at http://localhost:44357/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:44357/_framework/blazor.server.js:8:31390)
    at http://localhost:44357/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (http://localhost:44357/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (http://localhost:44357/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (http://localhost:44357/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (http://localhost:44357/_framework/blazor.server.js:1:38091)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Oqtane.Modules.Controls.RichTextEditor.OnAfterRenderAsync(Boolean firstRender) in D:\temp\Oqtane.Client\Modules\Controls\RichTextEditor.razor:line 120
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executed endpoint '/_blazor'
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished in 854.0505ms 101 
[2020-05-20T19:11:04.558Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. 
[2020-05-20T19:11:04.560Z] Information: Connection disconnected.

[sbwalker]

if you use your browser tools to inspect the page markup are you able to verify that the quill scripts are registered at the bottom of the page body? They should be named:

"js/quill1.3.6.min.js"
"js/quill-blot-formatter.min.js"
"js/quill-interop.js"

I am not able to reproduce

[jimspillane]

Yes, the quill scripts are loading; however, I think the timing of the interop call to createQuill() is ahead of the scripts loading. I changed the network to a slow 3G setting in devtools, and it shows the blazor circuit terminated before the quill scripts loaded.

It might be an unintended consequence of a <script> in a component. dotnet/aspnetcore#16218

[PavelVsl]

I think than scripts cannot be dynamic as styles. And adding and removing them should be done with full page refresh.

[sbwalker]

@jimspillane we are not embedding <script> elements directly in components. Modules statically register their scripts so that the framework is aware of them. The framework dynamically adds them to the DOM using JSInterop in the ThemeBuilder component in the OnParametersSetAsync() method. It does this BEFORE the module components are dynamically added to the panes on the page. Inside of the RichTextEditor.razor component you will see that the Quill scripts are being referenced in the OnAfterRenderAsync() event - which is supposed to be fired after the component is fully rendered and is the recommended event for referencing JavaScript or the DOM.

In the thread you referenced, if you scroll down to Steve Sanderson's comment on Feb 4, 2019 he says "I'd recommend writing a small bit of JS that loads other JS files, and then calling it from your components via the JS interop APIs.". This is exactly the approach that Oqtane is using.

So before we abandon the current approach completely I think we need to understand the order of events better. Perhaps these Javascript references need to be added to the Head rather than the Body ( which is a very simply change to make ).

[sbwalker]

BTW: I was able to reproduce this problem using Ctrl-F5 ( clear cache and reload ) and you are correct that it only occurs the first time it tries to render the component - on subsequent renderings of the page it works fine. I have tried moving the JS files to the head but it did not resolve it ( even though I can see in the network tab that the files were downloaded earlier ). I think we need to try and isolate if this is only a problem with Quill - or if it is a general JavaScript loading issue. I am going to experiment a bit more today.

[sbwalker]

OK, so I created an External module to test this and it worked fine:

Server\wwwroot\Module.js:

window.interop = {
    showAlert: function (message) {
        alert(message);
    },
};

Client\Interop.cs:

using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace Siliqon.Cars
{
    public class Interop
    {
        private readonly IJSRuntime _jsRuntime;

        public Interop(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public Task ShowAlert(string message)
        {
            try
            {
                _jsRuntime.InvokeAsync<string>(
                    "interop.showAlert",
                    message);
                return Task.CompletedTask;
            }
            catch
            {
                return Task.CompletedTask;
            }
        }
    }
}

Client\Index.razor

@inject IJSRuntime JsRuntime
...
    public override List<Resource> Resources => new List<Resource>()
    {
        new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
        new Resource { ResourceType = ResourceType.Script, Url = ModulePath() + "Module.js" }
    };
...
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var interop = new Interop(JsRuntime);
            await interop.ShowAlert("testing");
        }
    }

This works fine on first render. So I am thinking that this issue may be related to the RichTextEditor itself. In looking at the code I see that it is doing JSInterop in a completely different way than the core. I will have to explore more.

[jimspillane]

Thanks for looking into this @sbwalker.

I created the Cars module above. It worked as expected until I switched the DevTools setting on the Network tab to Slow 3G, then I no longer received the alert.

I added a line to the showAlert() function, and the console message did not show as well.

window.interop = {
    showAlert: function (message) {

        console.log("*** made it to showAlert ***");
        alert(message);
        
    },
};

I added logging to OnAfterRenderAsync around the interop calls, and the messages were logged too.

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                await logger.LogInformation("************** Before interop");
                var interop = new Interop(JsRuntime);
                await interop.ShowAlert("testing");
                await logger.LogInformation("************** After interop");
            }
            catch (Exception ex)
            {
                await logger.LogError(ex, "Error Loading Car {Error}", ex.Message);
                AddModuleMessage("Error Loading Car", MessageType.Error);
            }
        }
    }

Just when I thought Blazor was going to solve all the JavaScript problems of the world :) Here are a few questions that I am thinking out loud...

Regarding Quill, do the scripts have dependencies that require them to be loaded in order?
"js/quill1.3.6.min.js"
"js/quill-blot-formatter.min.js"
"js/quill-interop.js"

Since we are injecting the scripts into the DOM, are they being loaded and executed when they are downloaded? I would say yes in a standard page refresh, but since this is in a SPA, does that change behavior of the loading?

Does the OnAfterRenderAsync() event act as a "$(document).ready" event? From what I see, it does not, and the interop calls might fail, even silently. So if we load scripts dynamically, we will need to know when they are ready to be called by the interop. Perhaps a JavaScript to .NET call to set an initialized script state.

[sbwalker]

I made some changes to the JSInterop for the RichTextEditor and I can no longer reproduce the issue. I am going to merge the changes so that you can do some testing as well ( if you have time ). #522

[jimspillane]

Thanks. I will test it this evening.

[jimspillane]

I simulated a 3G connection and it threw an exception on the first load.

[sbwalker]

When you originally logged this issue it was because you were able to reliably create it on a standard first load scenario - correct? The simulated 3G connection was a different (possibly related) aspect you reported later. Are you able to reproduce the problem under the original scenario? I am no longer able to reproduce the issue on a standard first load scenario after the recent code changes (which would mean that there was an improvement in behavior)

[jimspillane]

It took four tries(emptied cache) before it failed when running in VS Debug. I switched to Release mode and Start Without Debugging and it fails every time.

[sbwalker]

Thank you for verifying. I think I will reach out to Steve Sanderson regarding the recommended way to solve this probiem.

[sbwalker]

I am curious if this is a problem when running on both Blazor Server and Blazor WebAssembly - or just Blazor Server. The error message is talking about circuits which is directly related to SignalR.

[jimspillane]

I tested in WebAssembly too, the error message is logged in the console. Regarding the circuit breaking, we might be able to mitigate it with a try/catch.