Add support for React 18

[rasmusrim]

No description provided.

[maguro97]

Hi, I am trying to use your library on a react v18 project, but I cannot resolve the conflicts.
Is there any way to use the library with react v18?
Is official support for this version planned anytime soon?

[rasmusrim]

@maguro97 Until an official version appears, you can make it work by doing npm i --legacy-peer-deps

[Sumitroy12]

@diegomura Please check this pull request and add the support for react 18, this will be helpful. Thanks

[jscastanos]

👍🏼

[alekzajic]

Hi! Can you tell me approximately when is this going to be merged?

[bsrodrigue]

Please, I really need this

[vrinceanuv]

@diegomura we have 2 approvals here. do we have an approximate date for this PR merge? thank you

[lucastes]

Please let me know if there is a chance for PR by the end of this week (15 Aug). Thanks

[MarkForLoop]

Just updated to React 18
When will this PR be merged??

[PauloFavero]

This would be great to be accepted as fast as possible :D

[DonSmog]

Admin, please merge this PR. Its very needed. The earlier the better

[DonSmog]

@diegomura please there are 2 approvals already for this PR. Kindly merge. I really need this package to complete a project. Thanks

[tempo156a]

Not sure what is taking so long on this PR. 🙄

[vrinceanuv]

Really considering to fork this and publish it under a different name until this is merged. And of course, remove it after.

[for-hope]

@vrinceanuv please do

[ShaiMahnai]

wating. thank you

[Elelan]

Does it support react 18 yet?

[florian-heer]

@diegomura is there an estimation when this will be merged?

[diegomura]

Can someone validate if this does not break support for React 16 or 17? We can drop 16, although Im sure a lot of people still use it. But for 17 we should still provide support. I remember the reconciler bump had issues with it. Sorry for the delay. I don't have enough time these days to test and merge everything 😄

[DercilioFontes]

Can someone validate if this does not break support for React 16 or 17? We can drop 16, although Im sure a lot of people still use it. But for 17 we should still provide support. I remember the reconciler bump had issues with it. Sorry for the delay. I don't have enough time these days to test and merge everything 😄

@diegomura, could we have an alpha/beta version with those changes to test in our projects? I can try to test it with React 16, 17 and 18, and give some feedback.

[LB22]

@rasmusrim do you have any information on diegomura's comment, if this PR is breaking react 17 compatibility or if it supports it, if you have tested it?

[gitname]

Can someone validate if this does not break support for React 16 or 17?

For anyone considering testing this branch in React 16 or 17, the author of the branch posted a comment (linked below) containing a link to an NPM package (also linked below) that I assume contains the changes in this branch.

• Comment: React 18 peerDeps problem #1878 (comment)
• NPM package: https://www.npmjs.com/package/@react-18-pdf/renderer

Installation command:

$ npm install @react-18-pdf/renderer --save

That @react-18-pdf/renderer NPM package installed OK in my environment (a React 18 environment bootstrapped with CRA v5).

Edit: It installed OK, but I could no longer build my app.

---

Installation aside, I don't know what "validating whether this branch breaks support for React 16 or 17" would involve. Some ideas I have of things that could be checked are:

• Does it install without errors
• Are there any specific things the project maintainer wants people to test
• Can I create an empty PDF
• Can I create a PDF that contains all of the various element types offered by this project (e.g. text, images, SVG)
• Can I view a PDF
• Do all the automated tests in this project pass (I don't know whether there are any)
• Can I download a PDF

Anyway, at this point, I don't plan on doing that validation work. I don't use React 16 or 17 on my projects. I am willing to do some of the validation work, provided I know what the specific validation criteria are (i.e. "what done looks like" to person who would be deciding whether or not to merge this branch).

[gitname]

Installation aside, I don't know what "validating whether this branch breaks support for React 16 or 17" would involve.

• Are there any specific things the project maintainer wants people to test

Hi @diegomura, is there a documented "test/validation procedure" for this project; e.g. a checklist that someone goes through when making major changes to the project, in order to detect regressions? If not, are there specific things you suggest people test in order to validate whether this branch breaks support for React 16 or 17?

[vnevermore]

Looking forward for some info about it as well

[themetzmeier]

Looking forward to it as well, currently having to use craco to use this in my react 18 app.

[dbojarski]

Still waiting...

[krishna-404]

Sadly npm i --legacy-peer-deps true doesnt work & gives a Cannot create property '_updatedFibers' on number '0' at requestUpdateLane error. Any workaround this for now?

I have other dependencies which are already on 18.2.0 version so I cant roll back either 😬

Thanks!

[DercilioFontes]

Sadly npm i --legacy-peer-deps true doesnt work & gives a Cannot create property '_updatedFibers' on number '0' at requestUpdateLane error. Any workaround this for now?

I have other dependencies which are already on 18.2.0 version so I cant roll back either 😬

Thanks!

Have you tried the one for React 18?

npm install @react-18-pdf/renderer --save

[krishna-404]

Have you tried the one for React 18?

npm install @react-18-pdf/renderer --save

Getting this error

node_modules/@react-18-pdf/layout/lib/index.es.js:20:17: Cannot resolve dependency '@react-18-pdf/yoga'
  18 | import resolveImage from '@react-18-pdf/image';
  19 | import flatten from '@react-18-pdf/stylesheet/lib/flatten';
> 20 | import Yoga from '@react-18-pdf/yoga';
     |                 ^

[LimaoCode]

Have you tried the one for React 18?
npm install @react-18-pdf/renderer --save

Getting this error

node_modules/@react-18-pdf/layout/lib/index.es.js:20:17: Cannot resolve dependency '@react-18-pdf/yoga'
  18 | import resolveImage from '@react-18-pdf/image';
  19 | import flatten from '@react-18-pdf/stylesheet/lib/flatten';
> 20 | import Yoga from '@react-18-pdf/yoga';
     |                 ^

I have the same issue.
@rasmusrim Do you know what cause Yoga error ?

[dbojarski]

For me npm install @react-pdf/renderer --legacy-peer-deps works. It installs with ^3.0.0 version. Of course it does not have documented features like pageMode or pageNumber (props on Document and Page) so I had to install 2 packages.

@react-pdf/renderer for creating the pdf (create pdf model using Document, Page, View, Text, Image etc. components). Then I can get the pdf using usePDF hook.

@react-pdf package for displaying the pdf and access to pageMode and pageNumber props on its Document and Page components. It renders the pdf by passing pdf generated by first package to the Document component using 'file' prop.

[LimaoCode]

For me npm install @react-pdf/renderer --legacy-peer-deps works. It installs with ^3.0.0 version. Of course it does not have documented features like pageMode or pageNumber (props on Document and Page) so I had to install 2 packages.

@react-pdf/renderer for creating the pdf (create pdf model using Document, Page, View, Text, Image etc. components). Then I can get the pdf using usePDF hook.

@react-pdf package for displaying the pdf and access to pageMode and pageNumber props on its Document and Page components. It renders the pdf by passing pdf generated by first package to the Document component using 'file' prop.

Thanks for the tip dude you help me a lot!

[bryanltobing]

@react-pdf/renderer for creating the pdf (create pdf model using Document, Page, View, Text, Image etc. components). Then I can get the pdf using usePDF hook.

@react-pdf package for displaying the pdf and access to pageMode and pageNumber props on its Document and Page components. It renders the pdf by passing pdf generated by first package to the Document component using 'file' prop.

could you share a gist on how you do this? @LimaoCode

[dbojarski]

@react-pdf/renderer for creating the pdf (create pdf model using Document, Page, View, Text, Image etc. components). Then I can get the pdf using usePDF hook.
@react-pdf package for displaying the pdf and access to pageMode and pageNumber props on its Document and Page components. It renders the pdf by passing pdf generated by first package to the Document component using 'file' prop.

could you share a gist on how you do this? @LimaoCode

Here is a gist of how to combine those 2 packages to have fully functional react pdf rendering.

https://gist.github.com/dbojarski/f4b8af4a3f6a631e720ee3b4de3294fb

[sivertheisholt]

Any update about this merge?

[MarkForLoop]

I ran npm install @react-pdf/renderer --legacy-peer-deps

I am on
"@react-pdf/renderer": "^3.0.0",

I am getting this error

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at new Queue (index.js:12:16)
    at Queue (index.js:9:12)

and

react_devtools_backend.js:4026 The above error occurred in the <PDFDownloadLink2> component:

    at PDFDownloadLink2 (http://localhost:3001/node_modules/.vite/deps/chunk-KX44B3DT.js?v=b567f509:143750:24)
    at div

[ashfaqnisar]

Hey @diegomura, Would be very grateful, If you could take a look at this issue in you're spare time and release an alpha or beta version until a stable version is released.

[simonurmi]

I ran npm install @react-pdf/renderer --legacy-peer-deps

I am on "@react-pdf/renderer": "^3.0.0",

I am getting this error

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at new Queue (index.js:12:16)
    at Queue (index.js:9:12)

and

react_devtools_backend.js:4026 The above error occurred in the <PDFDownloadLink2> component:

    at PDFDownloadLink2 (http://localhost:3001/node_modules/.vite/deps/chunk-KX44B3DT.js?v=b567f509:143750:24)
    at div

I was able to fix this by manually installing the events package.

[sulemankhann]

@simonurmi thanks for the quick fix. Can you tell me how this library fix the issue?

[simonurmi]

@sulemankhann

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at new Queue (index.js:12:16)
    at Queue (index.js:9:12)

It's trying to read property call of EventEmitter, which is undefined. EventEmitter is part of the events package. I just tried installing it and it worked. I'm also working with Vite. My guess is that events is missing as a peerDependency in react-pdf, and in other build tools it's bundled in through some other way.

TL;DR events is probably missing as a peerDependency

[kal07]

@simonurmi thanks everything work fine after following your advice

[diegomura]

Hi all. Was someone able to validate this still works for React 17? I didn't have time, but I have doubts wether will work. Tbh I didn't have enough time to find what's the best way to have this lib working for at least 17 and 18. Alpha versions are an option, but that would be a nightmare to maintain, test and publish, as would require cherry-picking commits in both versions and therefore fork this project in 2.

[lildesert]

Hey, I was able to install and run this lib with react 18 by adding these overrides to my package.json

"overrides": {
    "@react-pdf/renderer": {
      "react": "$react",
    }
  }

Be aware that as stated by this comment, "the overrides property is only honored when running npm install first time".
(I ran into the issue myself)

I guess this could serve as a temp fix while we're waiting for this PR to be merged or another solution to be provided.

[n-glaz]

Hi all. Was someone able to validate this still works for React 17? I didn't have time, but I have doubts wether will work. Tbh I didn't have enough time to find what's the best way to have this lib working for at least 17 and 18. Alpha versions are an option, but that would be a nightmare to maintain, test and publish, as would require cherry-picking commits in both versions and therefore fork this project in 2.

@diegomura One standard practice would be to create a major version release for React 18 compatibility and add the following documentation:

• Verison N of @react-pdf requires React 18. For React Versions <= 17, use version X. at the very beginning of the docs and Readme.
• Provide an upgrade guide for the React 18 version, referencing the official React 18 upgrade guide for users' core apps.
• Preserve old documentation, start new sheet of docs based on old

I would be more than happy to help write an upgrade guide.

This library is amazing, however if it doesn't become compatible with React 18 and later versions, users will default to a third-party fork that does, and that'll just be a nightmare for all of us.

Btw thanks a ton for this package :) Really great experience working with the docs and PDF components.

[DiegoGonzalezCruz]

Hi, any news on this PR?

[crice88]

Any movement on this? Would love to get official React 18 support :)

[gitname]

Hi everyone, I got @react-pdf/renderer* to work with React 18 by doing the following two things:

1. Adding an "override" property to the React app's package.json file
2. Creating and using some custom components (only necessary for TypeScript projects)

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

*The standard @react-pdf/renderer package available via npm, not the modified one in this PR branch.

[modosc]

i did some digging into this.

to make the specs pass we need to provide a root document - this is part of how react 18 works but i haven't been able to find any custom renderers that have implemented this so i'm unsure of what's required.

the above change is not backwards compatible so a major version bump would be required and going forward react-pdf would have to only support react >=18

[jeetiss]

closed in favor of #2140

[cmmille]

@sulemankhann

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at new Queue (index.js:12:16)
    at Queue (index.js:9:12)

It's trying to read property call of EventEmitter, which is undefined. EventEmitter is part of the events package. I just tried installing it and it worked. I'm also working with Vite. My guess is that events is missing as a peerDependency in react-pdf, and in other build tools it's bundled in through some other way.

TL;DR events is probably missing as a peerDependency

Thank you! I have come back to this package every few weeks hoping it worked out of the box on React 18+ but hadn't found a solution yet. Adding events as a dependency made the package finally work for me.

package.json

{
  "name": "react-pdf-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-pdf/renderer": "^3.1.3",
    "events": "^3.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "vite": "^4.0.0"
  }
}

Pipeline:

npm create vite@latest react-pdf-demo
cd react-pdf-demo
npm i events
npm i @react-pdf/renderer
npm run dev

It should also be noted that the README uses StylesSheet.create() which is a react native function. To make everything build properly, the stylesheets can be created inline as a JS object.

// Create styles
const styles = {
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
};