Wrong URL for PDF worker

[SachaG]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues

Description

When I try to use this library, it tries to load the worker file relative to the current path ( so http://localhost:3000/booking/pdf.worker.js instead of http://localhost:3000/pdf.worker.js).

Is there a way to specify that path or at least make it absolute? I'm running Meteor btw, so I can't use the Parcel or Webpack configs.

[wojtekmaj]

You absolutely can! I can see you're starting with React-PDF so I suggest you to use 4.0.0 beta. Configuring it should be a breeze. You can pass configuration, including workerSrc, as an object in options prop.

Have a look at the docs for it. It will link to further documentation on Mozilla's side. Let me know if anything about it is unclear. This package got too popular to have anything bad in documentation :)

[wojtekmaj]

Similar issues: #52, #164, #245

[SachaG]

Hmm actually I couldn't get it to work. I also checked the related issues and couldn't get those fixes to work either. What's the actual option name? I'm using 4.0.0-beta.5 btw.

[wojtekmaj]

It's workerSrc @SachaG. Updated original comment.

[SachaG]

Just to clarify, you mean as a prop of the Document component? Something like this?

<Document
  file={booking[`contractEn`]}
  onLoadSuccess={this.onDocumentLoadSuccess}
  loading={
    <div className="bookings-contract-pdf">
      <Components.Loading />
    </div>
  }
  options={{
    workerSrc: '/pdf.worker.js'
  }}
>
  {Array.from(new Array(numPages), (el, index) => (
    <Page width={this.state.width} key={`page_${index + 1}`} pageNumber={index + 1} />
  ))}
</Document>

For some reason it's not working for me…

[wojtekmaj]

Did you set up your build so that you actually have pdf.worker.js?

If yes, check the Network tab in developer tools to ensure you're loading pdf.worker.js from correct location.

If no, check README for instructions for your bundler of choice.

Side note: It's good to set options outside render so that it will stay referentially equal and so that React could optimize rendering of your app.

[SachaG]

Yes, the issue is the URL, not the file. The location in the Network tab is wrong, it's trying to load from http://localhost:3000/booking/pdf.worker.js (the current URL being http://localhost:3000/booking/foo) instead of http://localhost:3000/pdf.worker.js.

So it seems like the option is not doing anything.

[SachaG]

(For now I copied pdf.worker.js to the http://localhost:3000/booking/ path to make it work, but this gave me a Failed to load PDF file. error. I'm not sure if it's related or not…)

Edit: that second error was due to a mistmatched version between the package and the pdf.worker.js file, since I copied it over manually it got out of sync. The issue remains that workerSrc does not seem to have an effect, but at least for now my implementation works.

[wojtekmaj]

So whatever value you put in workerSrc it does not change anything? Are you using 4.0 or 3.0 at the moment?

[SachaG]

Yep exactly, the setting seems not to be taken into account. And I'm using 4.0.0-beta.5.

[wojtekmaj]

Sorry, I misinformed you. Please check updated instructions: https://github.com/wojtekmaj/react-pdf#browserify-and-others

[SachaG]

That seemed to work! Thanks!

[vishwanathsnayak]

Hi All,
I'm trying to implement react-pdf preview. i'm getting error "Failed to load PDF file."
could you please help here.
Here is the code

import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

this.state = {
   numPages: null,
   pageNumber: 1,
}
onDocumentLoadSuccess = ({ numPages }) => {
        console.log('numPages : ', numPages);
        this.setState({ numPages });
    }

    onDocumentLoadError = ({ error }) => {
        console.log('Error : ', error);
    }

render {
 const { pageNumber, numPages } = this.state;
 const path = '/Checklist.pdf';
return (<div>
	<Document 
	  file={ path }
	  onLoadSuccess={ this.onDocumentLoadSuccess }
	  onLoadError={ this.onDocumentLoadError }>
	  <Page pageNumber={ pageNumber } width={ 600 } />
	</Document>
	<p>Page {pageNumber} of {numPages}</p>
</div>)
}

I can see the pdf.worker file getting loaded under network tab from cloud link (cdnjs.cloudflare.com).
I see error "Failed to load PDF file." could you please help here guys.

[Mahagney]

That seemed to work! Thanks!

Can you show me how did you solve the problem?
My problem is that it still looks for the worker in the relative path but my bundle is at the base of build folder, as mentioned by @SachaG here
I use webpack and "react-pdf": "4.1.0",