PDF displays on local machine but not when deployed

Support
, , , ,
1

My resume (which is a pdf) will not display when deployed but it works fine when I run my react-app locally. The button I created in order to download the resume works fine but the resume itself is not shown on my “Resume” page. Instead on the left hand side it says “Failed to load file” in small letters.

In the console this is shown:

image
image1915×951 246 KB

To display the pdf I used “react-pdf” version 7.1.2

This is the react-pdf code I used to display my resume:
pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.js", import.meta.url ).toString();
-This code is from this file in my repo : https://github.com/briandgomez/bg-portfolio-3.0/blob/main/src/Components/Pages/Resume.js

Is it possible to display a pdf using this library through netlify? Will I have to use another Javascript library or use another web hosting platform?

Netlify site name: https://briangomezretrofolio.netlify.app/
Github Repo: GitHub - briandgomez/cp-retrofolio
-I deployed my app from my “deployed-portfolio” branch

2

Hi, @briandgomez. That site no longer exists which mades troubleshooting far more difficult.

That said, I see that no serverless functions were deployed for this site. As serverless functions are the only way to run code server-side at Netlify, it appears that is the explanation for the code not running. You did not deploy the code correctly to run it at Netlify.

If there are other questions or concerns, please let us know.

3

@luke Yea sorry about that.
I figured it out already.

I just had to use this
pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js;

instead of this

pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.js, import.meta.url ).toString();

4

I have had the exact same problem, would you mind explaining me where in the directories did you use this code?

Thanks in advance

5

@certiblocksdev

I used it in my “Resume.js” file on line 6:

1 Like
6

This is awesome thanks for sharing this with the community!

1 Like