Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 18 peerDeps problem #1878

Closed
rasmusrim opened this issue Jun 8, 2022 · 28 comments · Fixed by #2140
Closed

React 18 peerDeps problem #1878

rasmusrim opened this issue Jun 8, 2022 · 28 comments · Fixed by #2140

Comments

@rasmusrim
Copy link

Should support React 18

@modosc
Copy link

modosc commented Jun 8, 2022

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
Copy link
Author

See this PR

@rasmusrim
Copy link
Author

@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
Copy link
Owner

@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
Copy link
Author

@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
Copy link
Author

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
Copy link
Author

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
Copy link

LB22 commented Jul 20, 2022

@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!

@mleonardblair
Copy link

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
Copy link
Author

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
Copy link

LB22 commented Aug 29, 2022

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

@rasmusrim
Copy link
Author

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
Copy link

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

@LimaoCode
Copy link

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

I have the same issue

@PixelForm
Copy link

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
Copy link

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
Copy link

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

@IamIGI
Copy link

IamIGI commented Sep 25, 2022

Still do not work :(

@Flaviano-Rodrigues
Copy link

Still do not work :(

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

@IamIGI
Copy link

IamIGI commented Sep 26, 2022

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
Copy link

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
Copy link

lwhiteley commented Oct 2, 2022

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

@ghost ghost mentioned this issue Oct 7, 2022
@vlakius
Copy link

vlakius commented Oct 21, 2022

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

@jeetiss jeetiss changed the title Support React 18 React 18 peerDeps problem Dec 23, 2022
@gitname
Copy link

gitname commented Dec 23, 2022

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
Copy link

ghost commented Dec 28, 2022

Shall we get this fixed soon?

@Sebastian-Nielsen
Copy link

Bump

@Tmodurr
Copy link

Tmodurr commented Jan 5, 2023

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

@hugrave
Copy link

hugrave commented Jan 12, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.