Blazor component - Failed to fetch dynamically imported module - telerikReportViewer

Question

I have calling the component <AppReportViewer/> in the frontend .razor file.

I get this error when i open up the component in frontend after building the application:

GET https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
bn @ blazor.webassembly.js:1
(anonymous) @ invoke-js.ts:233
Ul @ invoke-js.ts:276
$func350 @ 00b1ee2e:0x1faef
$func246 @ 00b1ee2e:0x1bf8c
$func239 @ 00b1ee2e:0xf173
$func273 @ 00b1ee2e:0x1d1b1
$func3185 @ 00b1ee2e:0xe81aa
$func2506 @ 00b1ee2e:0xbdf5b
$func2512 @ 00b1ee2e:0xbe75c
$func2536 @ 00b1ee2e:0xc0db3
$mono_wasm_invoke_method_bound @ 00b1ee2e:0xa526
Module._mono_wasm_invoke_method_bound @ dotnet.native.8.0.1.z35rpqq4ur.js:8
kr @ invoke-cs.ts:273
(anonymous) @ invoke-cs.ts:247
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
invokeDotNetMethodAsync @ blazor.webassembly.js:1
invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
N @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
N @ blazor.webassembly.js:1
C @ blazor.webassembly.js:1
dispatchGlobalEventToAllElements @ blazor.webassembly.js:1
onGlobalEvent @ blazor.webassembly.js:1
blazor.webassembly.js:1  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
      TypeError: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
TypeError: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at AppMain.Components.Extensions.Extensions.ImportModule(IJSRuntime js, String path)
   at AppMain.Components.AppReportViewer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

To rectify the error above i have made sure that i have installed the necessary Nuget packages, modified Index.html file to include necessary scripts both in head and body. Cannot make any changes to the component itself because it is auto generated by the Nuget package when the Project is started. Placed manually downloaded telerikReportViewer.js into wwwroot folder as well as JS subfolder inside wwwroot. Nothing has fixed the issue yet.

Answer 1

Did you add the interop.js as explained in step 5 of the article Integrating the Blazor Report Viewer? The error message seems to indicate it lacks in the index.html:

<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>
@* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@
@*<script src="_content/Telerik.ReportViewer.Blazor.Trial/interop.js" defer></script>*@