Тёмный

Using @react-pdf/renderer v3.0.1 with React 18 

gitname
Подписаться 33
Просмотров 26 тыс.
50% 1

In this video, I'll show you how I work around two problems in the current version of the @react-pdf/renderer package (v3.0.1), in order to use the package in a React 18 app.
RU-vid won't allow me to put a link to the GitHub gist in this video description; so, I'll post it as a video comment instead.

Хобби

Опубликовано:

 

15 дек 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 20   
@gitname
@gitname Год назад
Link to gist: gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6
@luizzzbento
@luizzzbento Год назад
Thanks a lot! It really helped me! From Brazil!
@miladtech
@miladtech Год назад
Thanks it was very helpful man
@user-ff3lc1et3u
@user-ff3lc1et3u 3 месяца назад
Thanks a lot! It really helped me! From Sochi, Russia!
@muh.hanifmuallif2441
@muh.hanifmuallif2441 Год назад
Thanks for saving my time
@NPicotto
@NPicotto Год назад
Thanks a lot man! This saved my ass!
@JemMBalangue
@JemMBalangue Год назад
Hi, I have a question if you were to encrypt that generated pdf by that specific library, how can it be done? Thank you.
@ProtesterBD
@ProtesterBD Год назад
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.
@gitname
@gitname Год назад
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.
@gerardsiles
@gerardsiles Год назад
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
@gitname
@gitname Год назад
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?
@raabyliandry3683
@raabyliandry3683 5 месяцев назад
I had the same problem.
@amatir-tutor2421
@amatir-tutor2421 11 месяцев назад
How to create a table
@akashbhat7823
@akashbhat7823 5 месяцев назад
checkout similar video PDF Extraction in React: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N6Hq4lNcfmE.html
@peterharwa9472
@peterharwa9472 Год назад
Does not render on mobile browser.
@gitname
@gitname Год назад
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.
@CODE-ze7oe
@CODE-ze7oe Год назад
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
@carlosdavidmesamartinez1512
did you found any solution? i am facing the same issue
@gitname
@gitname Год назад
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.
@CODE-ze7oe
@CODE-ze7oe Год назад
@@carlosdavidmesamartinez1512 I use pdfjs
Далее
Render pdf, docx, xlsx, ppt etc. in react application
12:35
Learn React Hooks: useContext - Simply Explained!
15:46
This React UI Library is GAME CHANGER!
18:13
Просмотров 518 тыс.
BRO PREMOVES LEVY RECAP!!!!
18:46
Просмотров 34 тыс.
I Never Want to Create React Tables Any Other Way
5:40
How to Create PDFs With Node JS and React
25:57
Просмотров 145 тыс.
Решил Проблему Из Детства 😍
0:33
Прошёл босиком 3600 метров
0:59