Skip to content

[C+ Checklist Needs Completion] Update react-fast-pdf to use modern pdfjs-dist lib #54095

Description

@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 OwnerCurrent Issue Owner: @sobitneupane

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.DailyKSv2

Type

No type

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions