[HOLD for payment 2025-01-02] Update react-fast-pdf to use modern pdfjs-dist lib

[gedu]

Background

react-fast-pdf is a library that simplifies working with PDF files in React applications by leveraging pdfjs-dist, a popular library for rendering PDFs. However, pdfjs-dist provides multiple builds of its worker file (pdf.worker.js), including a legacy version designed for older browsers and a modern version optimized for newer environments.
Currently, react-fast-pdf is configured to always load the legacy version of pdf.worker.js (pdfjs-dist/legacy/build/pdf.worker.mjs). This approach ensures compatibility with older browsers but does not take advantage of the performance improvements and reduced file size offered by the modern build. As a result, even applications running in modern browsers are forced to use the less efficient legacy build, which increases resource usage and impacts performance.
This behavior is particularly relevant for developers aiming to optimize their applications for modern environments, where smaller bundle sizes and faster load times are critical for user experience.

Problem

When using react-fast-pdf, it always loads the legacy version of pdf.worker.js from pdfjs-dist, which prevents modern browsers from leveraging newer features and optimizations, leading to performance inefficiencies.

Solution

Update react-fast-pdf so the PDFThumbnail component (and any other relevant parts of React-PDF) to dynamically load the appropriate pdf.worker.js build based on the environment.
Defaulting to the Modern Build: Use the modern pdf.worker.min.mjs file as the default worker for environments that support it.
Fallback to Legacy Build: Gracefully fallback to the legacy build only when necessary (e.g., for older browsers that lack support for modern JavaScript features).
This can be achieved by https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild or conditional code

Slack: https://expensify.slack.com/archives/C05LX9D6E07/p1734018163878969

Note: since we are not supporting Legacy browsers we can just use Modern Lib

Issue Owner

Current Issue Owner: @greg-schroeder

[gedu]

Hey @mountiny, @rinej will be working on this

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[mountiny]

@rinej can you please comment here?

[rinej]

Sure!
I created PRs:
In react-fast-pdf lib: Expensify/react-fast-pdf#40
In Exp App: #54250

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.78-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update react-fast-pdf to use modern pdfjs-dist #54250

If no regressions arise, payment will be issued on 2025-01-02. 🎊

For reference, here are some details about the assignees on this issue:

• @rinej does not require payment (Contractor)

[melvin-bot]

@mountiny @greg-schroeder @rinej The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mountiny]

Payment for @sobitneupane

Can you please complete the checklist here? Thanks!