You may experience a webpack issue when you install react-pdf. Since Webpack 5 isn't included in node automatically you can follow these steps in the react-pdf docs to help resolve the issue. github.com/diegomura/react-pdf#webpack-5
I'm ngl I couldn't figure it out myself the docs themselves show that you have to do something with webpack in nodemodules but I found installing a previous version of webpack is a better solution imo
Hi Arslan, I am an student and I am practicing on how generate pdf files from react. Thanks for the video it is was very helpful. Would you have any reference on how to create columns? or columns inside columns using react-pdf? Also, how could I find your next video? Many thanks man. You are inspiring people!
Hey there, That is a bit more advanced but there are great examples on codesandbox on how to make a chart with a table Here's the link to part 2 ua-cam.com/video/-_hRWBpaJZk/v-deo.html
Hello, thanks for the information I'm trying to do this in my app, but it's showing an error in the "" component:" and read properties of undefined (reading 'call') at new Queue
mine is also on it, I had to install it using --force, because it says that the react version is too advanced for a lib without support for the new version
Hello Arsian, Thank you for your video. My need is to view an existing pdf file - no image or text - in React. Can your process be adapted for this purpose?
Hi Arslan, this tutorial is great, but I have a query: Is it possible to add a background image to each generated page? I have tried to do it with different properties but nothing has worked for me. I hope you can help me, regards.
Theres two way i can think of try this. 1. {this.state.data.map((item,i) => Test)} or 2. this.state.data.map((item,i) => {item} ) Thats my best guess without actually interacting with the code
i try your video and implement using next.js 14 but some how image not show when i'm using components image in react-pdf also path of image using local. any suggestion for my problem
Hey bro I have resume component with lots of tailwind styling etc, I want to somehow export that as pdf, but no like an image inside a pdf, I saw this approach but its tedious cause I have 5 to 6 various types of templates with different styling…. Can you help?
@@arslan99 sure thing , first thank you for taking time to respond , what i mean is i am fetch a pdf file from a database , when i receive the file ( which is in blob format) , i managed to read it through (window.open(URL.createObjectURL(my_blob)) all this without react-pdf then when i am trying to display it using react-pdf by using component i cant seem to find a way to fill the "file" property of this component which it is necessary because it is the pdf file itself . I hope i was clearn enough , if i have any misconception feel free to correct me and thank you in advance.
If you are facing with issue "Module not found: Error: Can't resolve 'fs'", try this: In 'package.json' add: "dependencies": { "@react-pdf/renderer": "^3.3.3", }, "pnpm": { "overrides": { "@react-pdf/image": "2.2.3", "@react-pdf/pdfkit": "3.0.4" } }, And run 'npm i' - for reinstalling dependencies Happy hacking ;)
Hello Arslan, I have prepared a report with normal html css and react without using react-pdf. How can I convert that report to pdf without losing quality? I used the html2canvas and jsPdf libraries but the quality decreased.
@@arslan99 you did it to other component. What if i have a blog page and a download button in the same blog page. When i click the button the, the blogs will be download as pdf. If there is any way, could you please suggest me anything?
Thanks Arslan for making this video. It helped me big time but when I opened the downloaded pdf file it said the file got corrupted. I am trying to it figure it out. If anyone else also facing the issue please do let me know
When we click download button, that time i want to send this pdf to a email address Before click download button i will give email address in input field So how can done this, ? If u have time can make a video for us?
@@arslan99 Tried it with ttf, woff from local folder and google fonts link too but nothing. I don't know what can be the problem. To test it I used the example link from the docs working on - android: brave - mac: safari not working on - pc: brave, chrome, firefox, edge - mac: brave if the tutorial you mentioned covers the solution for this, I'd be more than grateful :D
Anyone have tried to use it on iOS? The PDFDownloadLink button doesn't work, it only displays the page instead of downloading the PDF file. Anyone has a solution for this? I'm using the latest version of it.
unfortunetly it seems like it wont work since it's peer dependency is at react 17 you could try --force when you install it. however it can be dangerous but thats a way to fix the issue
i get this error: "Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')."... Anyone got a solution? nothing i found on google works for me
@@arslan99 Sir i dont know whoever uses my web application even in my localhost when i click on PDFDownloadLink Button i starts download but when i see in my download it get failed with error message "Check your internet connection"
@@thelatelateshowwithmaaz6260 I'm not entirely sure on that case because check internet connection error usually comes from the browser saying you have not connected to wifi but other than that I'm not too sure sorry
@@thelatelateshowwithmaaz6260 I'm sorry I cannot give personal info if you wanna create a Pastebin or something and put the images there I can view them from there
Hello, nice video mate, i was implementing it on my project but appears me this 5 errors take a look please, how i can solve this .... : Compiled with problems:X ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\pdfkit\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\pdfkit\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\png-js\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/blob-stream/index.js 1:21-47 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\blob-stream' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules estructure\src' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }
@@arslan99 thanks a lot dude, the thing is that they ask me to modify the webpack.config but i don't have access to it, do you think that i sould use "npm run eject " to edit it?
@@arslan99 i did same way as u shown, as documentation said. This package is not working like before. For solving webpack need to use craco When use craco the can not install tailwind This packeage is dead
Thank you so much. I was having an error and I solved it by watching his video: ua-cam.com/video/YZP5r7Uy_bU/v-deo.html error: Module not found: Error: Can't resolve 'react-pdf/renderer'
ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28 Module not found: Error: Can't resolve 'stream' in '/home/sbuidev/workspace/atom/sre-dashboard/node_modules/@react-pdf/pdfkit/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
You may experience a webpack issue when you install react-pdf. Since Webpack 5 isn't included in node automatically you can follow these steps in the react-pdf docs to help resolve the issue.
github.com/diegomura/react-pdf#webpack-5
can you teach us how to add this webpack dependencies because I'm getting an error
I'm ngl I couldn't figure it out myself the docs themselves show that you have to do something with webpack in nodemodules but I found installing a previous version of webpack is a better solution imo
@@arslan99 where is the webpack.config file ? can not find in react app.
@@johngeronimo8821 r u able to use this?
@@farukeomar4354 unfortunately, it's impossible for me
Very usefull, I have find this download article for 3-4 hour and then I find u. Thank u so much
Glad I could help
same here
life saving video loved the last part of downloading
I'm glad I could help;
Hi Arslan,
I am an student and I am practicing on how generate pdf files from react. Thanks for the video it is was very helpful. Would you have any reference on how to create columns? or columns inside columns using react-pdf? Also, how could I find your next video? Many thanks man. You are inspiring people!
Hey there,
That is a bit more advanced but there are great examples on codesandbox on how to make a chart with a table
Here's the link to part 2
ua-cam.com/video/-_hRWBpaJZk/v-deo.html
@@arslan99 Thanks a lot Arslan! I will play around with it and see the possibilities. Thanks again
Hello, thanks for the information
I'm trying to do this in my app, but it's showing an error in the "" component:"
and
read properties of undefined (reading 'call')
at new Queue
mine is also on it, I had to install it using --force, because it says that the react version is too advanced for a lib without support for the new version
yes there seems to be a weird error with react pdf I'll try to see if i can make a video to fix this issue
thanks and love from bangladesh
Thanks for watching 🫡
Thanks, brief but clear
Np
is there way to do it with dynamic data i.e. pass data from a selected/clicked table?
exactly what I was searching for, thank you !
Thank you very much.. This is what I actually searching for.
Glad I could help!
Very helpful.
what extension are you using for autosuggestion ? is it tabnine or another?
GitHub copilot
Hello Arsian, Thank you for your video. My need is to view an existing pdf file - no image or text - in React. Can your process be adapted for this purpose?
Do you mean a pdf viewer in your react app?
@@arslan99 Yes. I resolved the issue with react-pdf. Thank you for the response.
I also was in need to view an existing pdf file, how did you solve it @vogner
I need this, thanks
Glad I'm could lend a hand
Thank u bro!
Np
Hi Arslan, this tutorial is great, but I have a query: Is it possible to add a background image to each generated page?
I have tried to do it with different properties but nothing has worked for me.
I hope you can help me, regards.
It should be possible Lemme see what I can do
@@arslan99 thank you, i trust you
ua-cam.com/video/aATNaD3r4Rs/v-deo.html that should help
Hey! Thanks for sharing this! Do you have any idea about how I could capture scrollable content into pdf?
one way I guess you could do it, is by putting it all in a react pdf list tag and that should help
thank for the video. It was useful 👍
Glad it was helpful!
Thank you.
Np
thanks a lot
Np bro
thanks bro..
i cant figure out how to add dynamic data i can map through via react pdf components. e.g. {item.data} doesn't work.
I assume you'd have to make the map inside the text tag instead of item.data
Thanks for replying. For example i have this...
const { rightEye, LeftEye } = useContext(DataContext);
const age = rightEye.age;
return
(
{age}
)
i've tried {rightEye.age} to with no luck value updates on app re-renders, which didn't work, so i went with the above that didn't work either.
Theres two way i can think of try this.
1. {this.state.data.map((item,i) => Test)}
or
2. this.state.data.map((item,i) =>
{item}
)
Thats my best guess without actually interacting with the code
@@arslan99 thank you i found a solution .
@@SonAyoD awesome! 😃
i try your video and implement using next.js 14 but some how image not show when i'm using components image in react-pdf also path of image using local. any suggestion for my problem
Hi, I'm having this issue RangeError: Failed to construct 'TextDecoder': The encoding label provided ('utf-16le') is invalid.
Unfortunately I'm not too sure what that means sorry
Is it useful to replace the existing content in the pdf ?
Hey bro I have resume component with lots of tailwind styling etc, I want to somehow export that as pdf, but no like an image inside a pdf, I saw this approach but its tedious cause I have 5 to 6 various types of templates with different styling…. Can you help?
is there a way to display pdf from remote database , especially if there are received as blob ?
Not too sure I understand what you mean. Could you elaborate?
@@arslan99 sure thing , first thank you for taking time to respond , what i mean is i am fetch a pdf file from a database , when i receive the file ( which is in blob format) , i managed to read it through (window.open(URL.createObjectURL(my_blob)) all this without react-pdf then when i am trying to display it using react-pdf by using component i cant seem to find a way to fill the "file" property of this component which it is necessary because it is the pdf file itself . I hope i was clearn enough , if i have any misconception feel free to correct me and thank you in advance.
@@msea5654 I've actually never delt with making a blob back into a pdf but this may help
stackoverflow.com/questions/62575805/convert-blob-to-pdf-file
LeGoat
Sir i am trying to this but i don;t know the image is showing on the page but when i open the pdf after download there was no image
how are you displaying your image? in your pdf?
I think this solution wont work with a vite react app but works fine with Create react app
Thanks alot
How can I convert any react component with dymanic content to a PDF blob. Is that even possible with this library?
Well you can make a use call back that changes the blob depending on the dynamic content
Can you link the video url to send the pdf to email that you mention at the end of the video?
ua-cam.com/video/-_hRWBpaJZk/v-deo.html
T H A N K Y O U U U U ❤
Np
If you are facing with issue "Module not found: Error: Can't resolve 'fs'", try this:
In 'package.json' add:
"dependencies": {
"@react-pdf/renderer": "^3.3.3",
},
"pnpm": {
"overrides": {
"@react-pdf/image": "2.2.3",
"@react-pdf/pdfkit": "3.0.4"
}
},
And run 'npm i' - for reinstalling dependencies
Happy hacking ;)
does this work on electron js?
Funny enough I'm actually learning electron so I can duplicate this tutorial onto that for you soon
Is this libraly support utf-8 just like Thai font ?
I'm not sure
@@arslan99 thanks arslan
Work with next too?
It should but not entirely sure
I have to pass pure html is that possible?
Hello Arslan, I have prepared a report with normal html css and react without using react-pdf. How can I convert that report to pdf without losing quality? I used the html2canvas and jsPdf libraries but the quality decreased.
How come you don't want to use react pdf? I'm a bit confused haha
Se puede colocar ese PDFDownloadLink dentro del onclick?
is this what you mean? stackoverflow.com/a/66768020
is it possible to download the existing page?
Sorry what do you mean existing page?
@@arslan99 you did it to other component. What if i have a blog page and a download button in the same blog page. When i click the button the, the blogs will be download as pdf.
If there is any way, could you please suggest me anything?
So you mean you want to download something directly on the webpage?
thank you so much this helped me lot
have you uploaded next vdo?
Not yet, it's a longer video so the production is taking sometime 😅
when you are going to upload it?
i want horzontal line in my pdf how should i do it
Not to sure yet maybe throw l tomorrow or Friday
If I remember correctly it was
Thanks Arslan for making this video. It helped me big time but when I opened the downloaded pdf file it said the file got corrupted. I am trying to it figure it out. If anyone else also facing the issue please do let me know
Hmmm there could be something wrong with your generating of your pdf
got the same problem. But I forgot to return the PDF-file in the const of the PDF-file.js maybe you did the same.
const PDFFile =()=>{
return ....
yes you are right I forgot to update the issue has been resolved when I used return@@HanLok420 Thanks!!!
how can I make the pdf not download and just only show it on the browser?
stackoverflow.com/questions/45596329/display-pdf-in-reactjs this should help
will this work now? I installed react using vite
Not too sure about vite I've never used it before
Hi
Can you please say how do I display images in my pdf using react pdf renderer
react-pdf.org/svg
This should help
can not install this package , error shown ,but why
Please refer to my pinned comment it shows how to solve it
Hello Arslan, I see you couldn't set the page number on each page, I have the same problem, only show it at the end of the entire document
so can u share video part 2. where u showing how send pdf file to someone email?
ua-cam.com/video/-_hRWBpaJZk/v-deo.html
When we click download button, that time i want to send this pdf to a email address
Before click download button i will give email address in input field
So how can done this, ? If u have time can make a video for us?
The download button is getting disappeared. I am not getting where i went wrong
You're teranary operater could be wrong 🤔
Can't resolve './zlib_bindings' in 'D:
eact
epo\LaterEntryUI\LaterEntryUI
ode_modules\zlib\lib' getting this error.can anyone solve this
try re installing the package or re install your ndoe modeuls
in github you have different things and I can't see that you import pdffile anywhere
I think I must've deleted it you can just fork it and import it 😃
@@arslan99 i added a pull request with your original code, you can take a look and merge it if you want :)
@@crushed_oreosoh wow that's awesome! I'll check it out thanks!
Sir when i click on the download button it is not giving me any result
What's your code looking like?
Sir I tried it again and it works.
But when I click on the download button it's not showing loading before displaying the pdf.
Hello Arslan,
Thank you for uploading this video! Can I ask please how to make Hyperlinks (jump to page)?
Just found it! Thank you for your amazing work!
I'm glad you got it 😁
And this is also what you've tried?
stackoverflow.com/a/70577891
If that doesn't work then I will make a tutorial on it for you
@@arslan99 Tried it with ttf, woff from local folder and google fonts link too but nothing.
I don't know what can be the problem. To test it I used the example link from the docs
working on
- android: brave
- mac: safari
not working on
- pc: brave, chrome, firefox, edge
- mac: brave
if the tutorial you mentioned covers the solution for this, I'd be more than grateful :D
@@unlimitedpower5986 Lemme see what I can do
hi bro
i install the package but, Module not found: Error: Can't resolve 'react-pdf/renderer'
how to solve it
You have two options, either delete your node modules and reinstall your node modules or reinstall react pdf
@@arslan99 I've done both, it's still the same
@@fakhrialfatah7678 oh try installing an earlier version of react pdf
@@arslan99 what version would it be?
I would suggest going through the versions and finding an older version with a pretty substantial amount of downloads
Anyone have tried to use it on iOS? The PDFDownloadLink button doesn't work, it only displays the page instead of downloading the PDF file. Anyone has a solution for this? I'm using the latest version of it.
www.npmjs.com/package/react-native-pdf you could use something like this
Do you now how to get it work with react18.2.0? I can't install it now :(
unfortunetly it seems like it wont work since it's peer dependency is at react 17 you could try --force when you install it. however it can be dangerous but thats a way to fix the issue
i get this error: "Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')."... Anyone got a solution? nothing i found on google works for me
I don't think I used fontkit however I have a advanced react pdf tutorial on my channel you can check it about font changes
@@arslan99 thanks for reply!
My problem was because of some dependencies :)
@@radubogdan5725 I'm glad you got it 😁
Sir plz help me iam in a big trouble because
When downloading pdf it is saying check your internet connection and try again please help sir
Is your internet not connected? Your browser seems or your computer seems not to be connected
@@arslan99 Sir i dont know whoever uses my web application even in my localhost
when i click on PDFDownloadLink Button i starts download but when i see in my download it get failed with error message
"Check your internet connection"
@@thelatelateshowwithmaaz6260 I'm not entirely sure on that case because check internet connection error usually comes from the browser saying you have not connected to wifi but other than that I'm not too sure sorry
@@arslan99 Sir if you can give your instagram i can send you error images
Hope this will be helpful for both of us Sir
@@thelatelateshowwithmaaz6260 I'm sorry I cannot give personal info if you wanna create a Pastebin or something and put the images there I can view them from there
is this react js or react native??
React js
How to create table ?
Lemme see what I can do for you
Helo arslan Can you please tell me about the suggestion you getting when you was writing code
That's called GitHub copilot
@@arslan99 thnks alot ❤
@@adeeltechedit6760 you're welcome 😁
i dont know what is your version of react... i have some problem with that pdf
its the most recent but what issue do you have?
@@arslan99 webpack < 5 used to include polyfills for node.js core modules by default.
solved
@@kacperkepinski4990 Im glad you got it 😃
@@kacperkepinski4990 how did you solve that error
How to create table
not too sure
Error webpack 5. :(
Please refer to this
github.com/diegomura/react-pdf#webpack-5
bro getting error while importing the react-pdf library
What's the error?
getting page blank........
what is your error in your console say?
how to use with redux?
I'm not too sure. I've never used redux before 😕
@@arslan99 any idea?
How to pass props into this
this should help sorry for the late response github.com/wojtekmaj/react-pdf/issues/308#issuecomment-443538284
Pdf is not downloading
What error are you getting?
@@arslan99 no error, but onclick of download button is not responding , the file is not downloading ... But When refreshes it is showing loading ....
@@yugandharsarath3197 try cloning the repo and comparing the app.js files to see if there could a typo in your code?
can u send this generated pdf to an email?
ua-cam.com/video/-_hRWBpaJZk/v-deo.html this sound help
Billion Thanks! @Arslan you just got a new subscriber here dx
@@boneclinkz5663 np glad I could help
Hello, nice video mate, i was implementing it on my project but appears me this 5 errors take a look please, how i can solve this .... :
Compiled with problems:X
ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28
Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion
ode_modules\@react-pdf\pdfkit\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion
ode_modules\@react-pdf\pdfkit\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion
ode_modules\@react-pdf\png-js\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
ERROR in ./node_modules/blob-stream/index.js 1:21-47
Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion
ode_modules\blob-stream'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28
Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion
ode_modules
estructure\src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
Yeah it's a problem with webpack, this link should help you
github.com/diegomura/react-pdf#webpack-5
@@arslan99 thanks a lot dude, the thing is that they ask me to modify the webpack.config but i don't have access to it, do you think that i sould use "npm run eject " to edit it?
I think the the webpack.config file is in node_modules try googling where is webpack.config in node_modulea
@@davon_news its on node_modules/react-scripts
@@johngeronimo8821 This is the kind of community i'm proud to belong 👌
is using incorrect casing
Sorry 😭
@@arslan99 is using incorrect casing , did you have that?
@@kacperkepinski4990 try doing Text instead of TEXT
@@arslan99 i dont have something like TEXT etc
@@kacperkepinski4990 have you installed the package and imported the tags?
i used this way but it always showing loading . can not able download the pdf.. plz help me out
{({loading}) =>
loading ? loading : 'Download now!'
}
Put the loading where the download button is and put the download button where the loadings
@@arslan99 so what will happend always show download, but the problem is, button r not working, pdf not being download
@@farukeomar4354 what does your pdf download function look like?
@@arslan99 i did same way as u shown, as documentation said.
This package is not working like before.
For solving webpack need to use craco
When use craco the can not install tailwind
This packeage is dead
@@farukeomar4354 oh really 😱 okay I'll try to make an update video. Friggin webpack 😤😤
haradly hear u
Sorry my mic is Dookie haha
Thank you so much. I was having an error and I solved it by watching his video: ua-cam.com/video/YZP5r7Uy_bU/v-deo.html
error: Module not found: Error: Can't resolve 'react-pdf/renderer'
Glad you got it!
ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28
Module not found: Error: Can't resolve 'stream' in '/home/sbuidev/workspace/atom/sre-dashboard/node_modules/@react-pdf/pdfkit/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.