React-pdf: IE 11

[mmichelli]

The example does not work on IE 11
https://react-pdf.org/repl

[DuncanMacWeb]

We also found that rendering doesn’t work on IE11 (just... nothing happens), so we’re planning to server-render for IE... would be great to get this working there (also Edge).

[devurc]

Curious if anyone had explored this issue more deeply and would have some context about the fix before I go off into the deep end of IE11 issues. This issue is currently blocking my team's adoption of this framework.

[chrisphillers]

I am having the same issue, purely from installing the dependency - my entire site will not load in ie11 and get this error:

HTML1300: Navigation occurred.
192.168.1.6
SCRIPT1002: Syntax error
frontend.a90df18c.js (212397,1)

[davidmcnamee]

I think the IE11 problem stems from the "dfa" package. Correct me if I'm wrong (I'm kind of new to this), but I took a look at the Syntax Error and it pointed me here:

This "dfa" package looks like it's not IE11 compatible, by the way it uses class syntax.

And after looking through my package-lock.json, it's a dependency of @react-pdf/fontkit which is a dependency of @react-pdf/renderer.

I've been looking into potential solutions for transpiling the module with the same babel configuring that I use for my frontend, but they all seem to say the same thing: "this is not meant to be an any-package IE11-compatible maker" So I'm not sure what to do

[devurc]

Yep, that's right. Coming back to this now a few months later, we were able to resolve it by transpiling it to ES5 syntax, and was able to successfully get a local demo working with BlobProvider. I'd recommend just trying and seeing if it works for you.

[rajlaxmiSetty]

@devurc please explain how to resolve this
I am also facing same issue

[Sustenance]

Looks like this was introduced in [email protected]. foliojs/dfa#4 is supposed to fix it, but hasn't been merged yet. In the interim, there is a temporary solution in that PR which is to pin dfa to version 1.1.0 using resolutions in your package.json and npm-force-resolutions to keep your package-lock.json patched correctly.