react-pdf v6 does not work on safari ≤14.1

[MattL75]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Recently migrated to react-pdf v6. Reading the readme, it seems it should work for Safari v12.1 and above. However I can only get it to work in Safari 15.6+. The images below are of the demo. I can also reproduce the same behavior in our app.

See screenshots in lower section.

Seems it is related to private names. Maybe a few changes in babel could help? Or could be a root pdfjs issue.

Steps to reproduce

1. Open Safari v14.1 or lower
2. Navigate to https://projects.wojtekmaj.pl/react-pdf/
3. Open console or observe that the pdf does not load

Expected behavior

Pdf should render

Actual behavior

Pdf does not render

Additional information

Safari v12.1:

Safari v13.1:

Safari v14.1:

Safari v15.6:

Environment

• Browser (if applicable): Safari
• React-PDF version: Tested locally with v6.1.1
• React version: 18.2.0
• Webpack version (if applicable): 5.75.0

[wojtekmaj]

List of supported browsers was based on mozilla/pdf.js#14538, most recent update of the list of supported browsers in PDF.js v2.13.216 which was used at the moment of merging #988.

Then, v2.14.305 was released with no updates to this list, and we updated PDF.js in React-PDF. This version was used until v6.0.0-beta.3, in v6.0.0-beta.4 we updated PDF.js to v2.16.105 (#1060).

What I missed is that between versions v2.14 and v2.16 there was v2.15, where minimum browser versions were updated in mozilla/pdf.js#15028, and I missed this changelog altogether.

Since we can't really roll back and v6 has been released already, I can only apologize, update README and advise to:

• Configure your bundler to transpile pdfjs-dist with Babel, esbuild or other tool you use for code transpilation
• If this fails, use older version of React-PDF, or use e.g. Yarn resolutions to force PDF.js version (pdfjs-dist) to a certain version number, e.g. 2.14.305, but I can't guarantee it working at all (and beware of PDFs not rendering perfectly after Chrome update #1010!).

[MattL75]

I had a feeling something like this had happened after checking out pdfjs' side of things. No worries @wojtekmaj. We'll figure something out :)

[wojtekmaj]

A good starting point is Promise.allSettled polyfill from core-js and including pdfjs-dist directory when transpiling code.

Please keep me updated. I think getting this working in slightly older browsers is achieveable, crucial for 6.x adoption and should be documented. Your feedback here will be invaluable.

[MattL75]

Due to time constraints on upcoming releases and the fact that we run off a fork of react-pdf, I can only switch the used build back to legacy for the time being. That works fine of course.

I made some light attempts at transpiling pdfjs. First stumbling block is Array.at for which you can get a polyfill from core-js. After that, early safari versions still failed but I didn't spare the time to keep going. I'll return to this once our release goes out.

[ishangupta01]

any updates on when this would be fixed?

[intelcoder]

Only solution is downgrade to 5 ..

[wojtekmaj]

any updates on when this would be fixed?

Never. Read #1193 (comment). You can either have support for older browsers, or the newer ones, not both. Sorry.

[vinujan59]

Able to get react-pdf v6 work with safari == 14.1 by making using legacy/build and babel transpiling, I am using webpack5 for build

following are customisations

resolve.alias = {
    'pdfjs-dist/build/pdf$': 'pdfjs-dist/legacy/build/pdf.js',
    'pdfjs-dist/build/pdf.worker.js$': 'pdfjs-dist/legacy/build/pdf.worker.min.js',
}


// rule for transpiling

  {
        test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', { targets: ['safari >= 14.1', 'defaults'] }]],
                },
            },
        ],
        include: [/node_modules/],
        exclude: {
            and: [/node_modules/], // Exclude libraries in node_modules ...
            not: [/pdfjs-dist/],
        },
    },