I've done theses steps as well, but I get tons of errors on the rendering, from yoga, zlib, stream... working with 18.2, and can't find any workaround for this
Hi @gerardsiles, I only have experience applying these workarounds to React apps created using create-react-app (i.e. using the process shown in the video). In your case, did you create the React app using create-react-app or by some other means?
Hi @mdtaju1681, I am surprised to hear that you have encountered a problem in production mode, while not encountering it in development mode. I have not noticed any difference in behavior between my development and production environments with respect to these workarounds. I assume this comment on the Gist was made by you ( gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6?permalink_comment_id=4430595#gistcomment-4430595 ). I noticed you are using other packages besides `@react-pdf/renderer`. I recommend applying the "divide and conquer" debugging technique to your situation; i.e. make a component that only uses the `@react-pdf/renderer` package (i.e. strip away other packages) and test it in both your development and production environments. Then, make a component that uses the other packages, but not `@react-pdf/renderer`, and test that in both environments. By doing that, you may be able to determine whether the issue resides in the `@react-pdf/renderer` package or one of the other packages.
Hi @peterharwa9472, when I use these workarounds, the resulting PDFs render OK for me on iPhone (e.g. Safari, Brave, and Firefox Focus), iPad (e.g. Safari, Brave, and Firefox Focus), Android (e.g. Chrome), and desktop (e.g. Chrome, Brave, Firefox). The `@react-pdf/renderer` package is a large one (1.6 MB minified / 466 KB minified + gzipped, according to Bundlephobia) and I wonder whether it was still being downloaded onto your mobile device when you concluded that the PDF did not render. If you post a link to a demo showing the exact code you're using (e.g. hosted on CodePen or GitHub Pages), I'll take a look.
I follow you but ,Uncaught TypeError: Cannot read properties of undefined (reading 'call') at new Queue (index.js:12:16) at Queue (index.js:9:12) at usePDF.js:20:25 at commitHookEffectListMount (react-dom.development.js:23150:26) at commitPassiveMountOnFiber (react-dom.development.js:24926:13) at commitPassiveMountEffects_complete (react-dom.development.js:24891:9) at commitPassiveMountEffects_begin (react-dom.development.js:24878:7) at commitPassiveMountEffects (react-dom.development.js:24866:3) at flushPassiveEffectsImpl (react-dom.development.js:27039:3) at flushPassiveEffects (react-dom.development.js:26984:14) But use yarn add
Hi @user-il9of3ed5b, what version of @react-pdf/renderer were you using when you got that error? I recorded this video using version 3.0.1 of the package, which was the latest version available at the time. A newer version of package has been released since then, but I haven't tried using it yet. It is possible that, with that newer version of the package, parts of this workaround will be unnecessary or even impossible. In the meantime, I have updated the video and Gist titles to indicate the specific @react-pdf/renderer version I was using when I made them. One other thing I noticed is that, as you said, you were using "yarn" instead of "npm". I haven't tried this workaround using yarn (I don't use yarn); I've only tried it using npm.
Link to gist: gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6
Thanks a lot! It really helped me! From Sochi, Russia!
Thanks a lot! It really helped me! From Brazil!
Thanks it was very helpful man
Thanks for saving my time
Thanks a lot man! This saved my ass!
Hi, I have a question if you were to encrypt that generated pdf by that specific library, how can it be done? Thank you.
I've done theses steps as well, but I get tons of errors on the rendering, from yoga, zlib, stream... working with 18.2, and can't find any workaround for this
Hi @gerardsiles, I only have experience applying these workarounds to React apps created using create-react-app (i.e. using the process shown in the video). In your case, did you create the React app using create-react-app or by some other means?
I had the same problem.
Thank you. All are ok in my development server. But, I'm facing a problem in production mode. I used solution' b' in my case.
Hi @mdtaju1681, I am surprised to hear that you have encountered a problem in production mode, while not encountering it in development mode. I have not noticed any difference in behavior between my development and production environments with respect to these workarounds.
I assume this comment on the Gist was made by you ( gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6?permalink_comment_id=4430595#gistcomment-4430595 ). I noticed you are using other packages besides `@react-pdf/renderer`. I recommend applying the "divide and conquer" debugging technique to your situation; i.e. make a component that only uses the `@react-pdf/renderer` package (i.e. strip away other packages) and test it in both your development and production environments. Then, make a component that uses the other packages, but not `@react-pdf/renderer`, and test that in both environments. By doing that, you may be able to determine whether the issue resides in the `@react-pdf/renderer` package or one of the other packages.
checkout similar video PDF Extraction in React:
th-cam.com/video/N6Hq4lNcfmE/w-d-xo.html
How to create a table
Does not render on mobile browser.
Hi @peterharwa9472, when I use these workarounds, the resulting PDFs render OK for me on iPhone (e.g. Safari, Brave, and Firefox Focus), iPad (e.g. Safari, Brave, and Firefox Focus), Android (e.g. Chrome), and desktop (e.g. Chrome, Brave, Firefox).
The `@react-pdf/renderer` package is a large one (1.6 MB minified / 466 KB minified + gzipped, according to Bundlephobia) and I wonder whether it was still being downloaded onto your mobile device when you concluded that the PDF did not render.
If you post a link to a demo showing the exact code you're using (e.g. hosted on CodePen or GitHub Pages), I'll take a look.
I follow you but ,Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at new Queue (index.js:12:16)
at Queue (index.js:9:12)
at usePDF.js:20:25
at commitHookEffectListMount (react-dom.development.js:23150:26)
at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
at commitPassiveMountEffects (react-dom.development.js:24866:3)
at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
at flushPassiveEffects (react-dom.development.js:26984:14)
But use yarn add
did you found any solution? i am facing the same issue
Hi @user-il9of3ed5b, what version of @react-pdf/renderer were you using when you got that error?
I recorded this video using version 3.0.1 of the package, which was the latest version available at the time. A newer version of package has been released since then, but I haven't tried using it yet. It is possible that, with that newer version of the package, parts of this workaround will be unnecessary or even impossible. In the meantime, I have updated the video and Gist titles to indicate the specific @react-pdf/renderer version I was using when I made them.
One other thing I noticed is that, as you said, you were using "yarn" instead of "npm". I haven't tried this workaround using yarn (I don't use yarn); I've only tried it using npm.
@@carlosdavidmesamartinez1512 I use pdfjs