PDFViewer takes a long time to load with JsInterop errors in VS - no longer loads on .net 9

[Ian Dobie]

Hi, I have a PDFViewer in a razor component, which is loaded in a cshtml page. It is actually working (eventually), but the page takes a long time to load with the PDF viewer included (over 10s). While running this locally, and before the page gets rendered in the browser, VS has constant errors in the output window ('System.InvalidOperationException' in Microsoft.JSInterop.dll - details later), and when the page does load, the PDF viewer takes around 5 seconds to render on the page. There are two main types of error that I can see, neither of which get seen in the browser, but are in the output window of VS:

Microsoft.JSInterop.JSException: 'this.element.querySelector is not a function

TypeError: this.element.querySelector is not a function

    at t.render (https://localhost:5005/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:276332)

    at t.initialize (https://localhost:5005/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:275268)

    at new t (https://localhost:5005/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:275103)

    at Object.initialize (https://localhost:5005/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:296102)

    at https://localhost:5005/_framework/blazor.server.js:1:3047

    at new Promise (<anonymous>)

    at y.beginInvokeJSFromDotNet (https://localhost:5005/_framework/blazor.server.js:1:3004)

    at Xt._invokeClientMethod (https://localhost:5005/_framework/blazor.server.js:1:60890)

    at Xt._processIncomingData (https://localhost:5005/_framework/blazor.server.js:1:58279)

    at Xt.connection.onreceive (https://localhost:5005/_framework/blazor.server.js:1:51920)'

AND also this:

System.InvalidOperationException: 'JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.'

This exception was originally thrown at this call stack:

    Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(long, string, string, Microsoft.JSInterop.JSCallResultType, long)

    Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long, string, System.Threading.CancellationToken, object[])

Please can you help?

[Sathiyaseelan Kannigaraj]

Hi Ian Dobie,

Thank you for reaching out. We suspect that this issue might be specific to the document you are using. However, we did not encounter any issues with the sample or the PDF we tested. Kindly provide the PDF and the version where you are facing this issue. Below, we have included the sample we tested for your reference.

Sample tested 

Regards,
Sathiyaseelan K

[Ian Dobie]

Hi, thanks for the reply. It's not to do with the document - it happens even if I don't set the document path so that it loads up as an empty viewer. It still takes over 10s to load the page and another 5+s to load the viewer, with those errors running continually in VS.

One difference between your sample project and mine is that mine is primarily a Razor Pages project, with the razor (Blazor) components loaded into the cshtml pages using the component tag helper. However I have successfully used a scheduler component on another page in the same way without any problems at all.

I have found that it works much better if the render mode is set to Server, rather than ServerPreRendered. It can still take a while to load the viewer, but the actual cshtml page itself loads much