Support React 18

[rasmusrim]

Should support React 18

[modosc]

fwiw we're using react@18 without any issues other than the warnings from yarn:

error "@react-pdf/renderer#react@^16.8.6 || ^17.0.0" doesn't satisfy found match of "[email protected]"
error "@react-pdf/renderer#react-reconciler#react@^16.0.0" doesn't satisfy found match of "[email protected]"

[rasmusrim]

See this PR

[rasmusrim]

@modosc We are also able to use it, but it seems like a trivial task to just add version 18 to the peer dependencies.

I seem to have forgotten to add the PR here. Sorry - that would be confusing. Did that now.

[diegomura]

@rasmusrim Im not so sure is that trivial. We tried supporting react 17 with the same fix in the past but things didn't worked, due to the react-reconciler being from a different version. I need to dig deeper in this

[rasmusrim]

@diegomura Thank you so much for working on this. I will see if I can spend some time looking into this next week. We really rely on this tool!

[rasmusrim]

I see that the reconciler is a problem, but do we need to upgrade that package?

I set up a sandbox environment which uses the changes in my PR to render all the example PDFs here: https://github.com/rasmusrim/react-pdf-sandbox

I run into some problems doing the same in our project. I will look a bit more into it.

[rasmusrim]

The problem seems to be this package: https://github.com/ai/size-limit/tree/main/packages/time. It installs React 17 so there are two versions of React. But that is only a devDependency, so doing a production build of @react-pdf, leaves me with only one version of React.

[LB22]

@diegomura Have you had time to dig deeper into this issue yet? Have you found anything in regards to this that you can share? There is this PR, are there any issues with it? If so, please comment here and in the PR. I appreciate your hard work!

[mkbcodes]

I'm having an issue similiarly, with it not recognizing react 18 and it spitting an error saying react dependency peer react@"^16.8.6 || ^17.0.0"

[rasmusrim]

You can try out this one: https://www.npmjs.com/search?q=react-18-pdf

It comes with absolutely no warranties or gurantees! I do not have time to maintain this, and will remove it as soon as I can.

[LB22]

@rasmusrim So npm install @react-18-pdf/renderer --save will do it, right?

[rasmusrim]

It should, yes. But right now it doesn't build on my system. Will see if I have some more time to look into it later. Please tell me how you are faring!

[trihoang1011]

after installing @react-18-pdf/renderer, I got this error can't resolve '@react-18-pdf/yoga'

[LimaoCode]

after installing @react-18-pdf/renderer, I got this error can't resolve '@react-18-pdf/yoga'

I have the same issue

[PixelForm]

create-react-app error with react 18.2.0 since react-pdf seems to only support up to react 17.0.0, will this soon get updated?

[acomanescu]

Would it be possible to release this under 3.1.0-beta.1 that will support React 18? So we can use it in our projects and not having to worry about React < 18.

[Flaviano-Rodrigues]

I trying to use this but in react 18.2.0 don't work

[IamIGI]

Still do not work :(

[Flaviano-Rodrigues]

Still do not work :(

exactly, unfortunately it's not working with react 18. I found another repository (similar) that has served me well

[IamIGI]

Still do not work :(

exactly, unfortunately it's not working with react 18. I found another repository (similar) that has served me well

Cool, could you link me to this repo. I am using pdfkit instead, but right now I have to make pdf on sercer side.... which is not what I want it... cuz I can't use react now to style pdf format.... :(

[Flaviano-Rodrigues]

Cool, could you link me to this repo. I am using pdfkit instead, but right now I have to make pdf on sercer side.... which is not what I want it... cuz I can't use react now to style pdf format.... :(

I'm using react-to-print. It generates the pdf and shows the user the option to print from the browser (which is exactly what I needed). I don't know if it will work for you bro, but I hope so!

Repo: https://github.com/gregnb/react-to-print#readme

[lwhiteley]

Also sad about this not working but it got me to do an open experiment to generate pdfs server-side with React as a template engine.

still a WIP but got it to work end-to-end so far

if you are able to generate PDFs server-side then maybe this research will help someone

https://dev.to/lwhiteley/react-and-puppeteer-pdf-generation-project-setup-1he2

[vlakius]

Still not working... react": "^18.2.0",

[gitname]

For those wanting to use @react-pdf/renderer with React 18 today, here is a two-part workaround you can use to do so:

1. Add an "override" property to your React app's package.json file
2. Create and use some custom SVG-related components (this is only necessary for TypeScript projects that use the <Svg>, <G>, or <ClipPath> elements)

I documented those two things in detail in the following gist: https://gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6

And I demonstrated them in the following video (the demo begins at the 1:20 mark): https://www.youtube.com/watch?v=YZP5r7Uy_bU

[ghost]

Shall we get this fixed soon?

[Sebastian-Nielsen]

Bump

[Tmodurr]

This would be majorly helpful to get this supported at React 18.2.0.

[hugrave]

I'm facing the same issue and it is compromising the whole system