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 Githubissues.

Githubissues is a development platform for aggregating issues.