How load render a PDF using react-pdf

[charklewis]

I am struggling loading a PDF using the popular react-pdf library. I keep running into the below error.

SyntaxError: Cannot declare a var variable that shadows a let/const/class variable: 'React'.
invariant2 — invariant.js:13

Error: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.

I have read the "gotcha" part of the docs that explain this issue but I don't think it is relevant there isn't any "server" specific code the tis being loaded in the client module. Any import (eg Document) from react-pdf throws this error. If I try to load it only on the server I get the error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ClientOnly`.

I have tried to only load the component on the client (using .client.tsx and ClientOnly from remix-utils), but the error still persists. I have also tried the suggestion on this issue but it also continues to fail.

I have also tried to follow the examples provided in their docs for esbuild, and I am able to progress further. It does load the "Loading PDF..." text. However when the page loads it continues to error with the same message. When this error occurs, the app is also unresponsive (ie no javascript works).

Any tips would be greatly appreciated.

[kiliman]

Do you have a sample repo available?

[kishaningithub]

https://stackoverflow.com/questions/70642314/is-there-a-way-to-generate-pdf-with-remix-run