stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
487 stars 184 forks source link

Problem with mime type, when load library on server #2648

Open wider2 opened 2 days ago

wider2 commented 2 days ago

I have tried to run locally on Angular this ngx-extended-pdf-viewer with version 19, 20, 21 and it run stable

but when I push it on the staging servicer I discover that library do not want to show the PDF, because it produce the 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. viewer-4.6.688.min.mjs:1 Failed to load module script: Expected a JavaScript

OpenPdf Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream"**

I see it is a backend setup error, where mime type not defined properly. I tried different attempts, still no luck. I have tried to set on Nginx

http {
  include mime.types;
  types {
    application/javascript js mjs;
  }
  default_type application/octet-stream;
wider2 commented 1 day ago

The most strange thing. On some devices, PDF viewer opened, on some of them - it did not. problem with MJS mime extension the most common error

TypeError: Promise.withResolvers is not a function pdf.worker-4.6.688.min.mjs:21:1354184 getPdfManager https://server/assets/pdf.worker-4.6.688.min.mjs:21 setupDoc https://server/assets/pdf.worker-4.6.688.min.mjs:21 createDocumentHandler https://server/assets/pdf.worker-4.6.688.min.mjs:21 _onComObjOnMessage https://server/assets/pdf.worker-4.6.688.min.mjs:21

stephanrauh commented 1 day ago

That's two different bugs.

  1. The MIME type is a pain in the - well, you know where. In 2024, it should be configured correctly on every server, but obviously, it isn't. Luckily, you've found the problem and configured nginx correctly.
  2. It's a bit weird that you say it still doesn't work - but your next comment clearly shows that you've managed to get the new nginx configuration up and running. I can only guess. Maybe you restarted the server in the meantime?
  3. The Promise.withResolvers() error happens when you're using an outdated browser. Sometimes you can't update your browser, so ngx-extended-pdf-viewer detects the capabilities of your browser and falls back to a slow but reliable JavaScript dialect. I wonder if this works on your device. Which files does your device load? If it doesn't support Promise.withResolvers(), it should load files with the suffix -es5.mjs.

Here's a wild shot: Maybe the PDF viewer loads the ES5 version of the viewer-.mjs but still loads the modern version of worker-.mjs? If so, please update to the latest version (22.0.0-alpha.10).

stephanrauh commented 1 day ago

Just a side remark: the current version of ChatGPT is surprisingly good at solving your kind of problem. Just make sure it queries the internet so it's up-to-date. I'm always ready to answer your questions, but even I have to admit ChatGPT is faster than me. :)