Works locally, but on server preview shows loading ... and doesnt change.

[sesanka]

It works as expected when i run locally. But on my server it keeps saying loading PDF ...
Also locally i see there is a get request to the url to get the pdf file, but on the server there is no request to get the pdf from url.

Code:

this.state = {
      numPages: null,
      pageNumber: 1,
}

onDocumentLoadSuccess = ({numPages}) => {
    console.log(numPages);
    this.setState({numPages});
}

render() {
    return (
...
<Row>
          <Col xs={12}>
            Test Preview pdf.
          </Col>
          <Document
            file={"https://gsi.berkeley.edu/media/sample-recommendation-letter.pdf"}
            onLoadSuccess={this.onDocumentLoadSuccess}>
            <Page height={150} scale={1} pageNumber={1}
                  onLoadProgress={this.onLoadProgress}/>
          </Document>
</Row>
)
}

Local device:

Server:

and no requests to fetch pdf.

[wojtekmaj]

No requests at all? Hmmm, did pdf.worker.js got loaded correctly on the server?

[sesanka]

Yes I think so.

[wojtekmaj]

Any errors in the console? Any network errors? Try and hook to onLoadError prop to see if React-PDF is not crashing, perhaps?

[cbaron]

A similar thing is happening to me.

import { Page, Document } from 'react-pdf/dist/entry.webpack';

No request is being made to get the worker.

[alex-shamshurin]

Worker has been built built separately, outside of main entry and not included or referenced from main.js and not linked from react-pdf.

[NikkiTheBugSlayer]

Did anyone figure out how to fix this?

[cbaron]

The following worked for me in webpack v4 production build:

import { Page, Document } from 'react-pdf/dist/entry.webpack';

For the webpack-dev-server we went with:

import { Page, Document } from 'react-pdf';

[NikkiTheBugSlayer]

@cbaron That worked thanks

[leonardo2204]

@cbaron How did you do that? Where can I put these different imports?
Thanks!

[sesanka]

In package.json adding "react-pdf" to "dependencies" instead of "devDependencies" solved the issue and then using it as follows solved my issue:

import { Page, Document } from 'react-pdf';