I am trying to import PDF.js library in a .NET 8 MAUI Blazor WebAssembly app, in javascsript isolation style.
Custom pdfLoader.js
file:
import * as pdfjsLib from './pdfjs/pdf.mjs';
export function loadPdf() {
... code with pdfjsLib ...
}
Importing pdfLoader.js:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./pdfLoader.js");
await _module.InvokeVoidAsync("loadPdf");
}
}
Error:
Failed to load module script: Expected a JavaScript module script but
the server responded with a MIME type of “application/octet-stream”.
Strict MIME type checking is enforced for module scripts per HTML
spec. blazor.webview.js:1 Failed to fetch dynamically imported
module: https://0.0.0.0/pdfLoader.js TypeError: Failed to fetch
dynamically imported module: https://0.0.0.0/pdfLoader.js at
Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64
targetInstanceId, String identifier, Object[] args) at
MyApp.Components.Pages.Book.OnAfterRenderAsync(Boolean firstRender)
at
Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task
taskToHandle, ComponentState owningComponentState)
Seems like this issue is also causing errors in other blazor libraries that make use of JS packages, but looks like these only fail when they are run on blazor WASM apps instead of blazor web apps. I reported a bug for a Blazor library that uses PDF.js:
https://github.com/vikramlearning/blazorbootstrap/issues/719#issuecomment-2118683667