pdf.js: pdf_viewer broken in 4.0.189 when using Webpack

Attach (recommended) or Link to PDF file here: No PDF needed; the viewer does not load properly.

Configuration:

Web browser and its version: Chrome 119.0.6045.105
Operating system and its version: Linux (Nobara 38)
PDF.js version: 4.0.189
Is a browser extension: No

It seems that https://github.com/mozilla/pdf.js/commit/927e50f5d48a67e76f2a51c112ea5a98867822fe broke pdf_viewer’s usage of pdfjsLib when using Webpack. Previously, it was possible to use it like this:

import * as pdfjs from "pdfjs-dist/legacy/build/pdf";
import { EventBus, PDFLinkService, PDFSinglePageViewer } from "pdfjs-dist/legacy/web/pdf_viewer";

However, this now breaks as pdf.mjs now contains __webpack_exports__ = globalThis.pdfjsLib = await __webpack_exports__;. This means that when the pdf_viewer code executes, pdfjsLib is not set yet.

Please let me know if I’m missing anything, but I believe this is a regression in the library, as I wasn’t able to find a way to use pdf_viewer with Webpack now.

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 22
Comments: 15 (1 by maintainers)

Most upvoted comments

I would also like to chime in and share my concern with top-level await being used here. This for a bizzare reason makes PDF.js non-functional in Vite, which I consider a blocker for upgrading PDF.js in React-PDF.

wojtekmaj on Jan 8, 2024

Please keep in mind that this issue is specifically about the problem outlined in https://github.com/mozilla/pdf.js/issues/17228#issue-1980128178, rather than a general discussion for any and all problems related to PDF.js version 4.0.

Please refer other problems with PDF. js 4.0 to their own discussions or issues, such that we avoid a situation where different things are covered in the same issue (since that makes tracking much more difficult).

Snuffleupagus on Nov 9, 2023

I’m seeing that as well. Jest fails on:

SyntaxError: await is only valid in async functions and the top level bodies of modules

and the await in the top level body requires ES2022 - the newest mobile phone browsers.

If I remove the top level await only for Jest testing, Jest fails on

Cannot find module 'pdfjs-dist/legacy/build/pdf'

because the pdf.js file in the new version of pdf.js ends with .mjs and these extensions are filtered out in react-scripts for Jest.

If I remove the filtering, it ends up again on the top level await, but now in pdf.mjs file:

node_modules\pdfjs-dist\legacy\build\pdf.mjs:22581
    __webpack_exports__ = globalThis.pdfjsLib = await __webpack_exports__;
                                                ^^^^^

    SyntaxError: await is only valid in async functions and the top level bodies of modules

pavdev64 on Nov 27, 2023

Appreciate that 👍🏻 although I’m seeing Jest at least not working when importing pdfjs-dist - it could be a problem there rather than anything wrong with what you’ve done, apologies.

jameshalsall on Nov 22, 2023

Would it work if you do e.g. const pdfjs = await import(“pdfjs-dist/legacy/build/pdf”); instead?

Yes, that seems to work in our case. I think that this is still an issue in some cases as it breaks bundling and I assume not everyone will be able to use the async import syntax, so will keep this open for the moment. Still, thank you!

code-elf on Nov 9, 2023

same issue, we are using the old cjs module, and mjs results in errors in our projects!

mashirozx on Nov 7, 2023