React-pdf: endless file loading

[Dronom]

• [X] I have read documentation in README
• [X] I have checked sample and test suites to see real life basic implementation
• [X] I have checked if this question is not already asked

What are you trying to achieve? Please describe.
Display first page of file and show the amount of pages.

Describe solutions you've tried
Try different versions of react-pdf, pdf-files.

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

const PreviewPdf = () => {
  const [numberPages, useNumberPages] = useState(null);

  const OnDocumentLoadSuccess = ({ numPages }, useNumberPages) => {
    useNumberPages(numPages);
  };

    return (
      <>
        <Document
          file={"http://www.pdf995.com/samples/pdf.pdf"}
          onLoadSuccess={event => OnDocumentLoadSuccess(event, useNumberPages)}
        >
          <Page pageNumber={1} />
        </Document>
        <div>
          <p>Pages: {numberPages}</p>
        </div>
      </>
    );
};

Additional information

1:

    var parentHotUpdateCallback = window["webpackHotUpdate"];

788:
return hotCreateRequire("./node_modules/babel-loader/lib/index.js?!./node_modules/react-pdf/dist/pdf.worker.entry.js")(__webpack_require__.s = "./node_modules/babel-loader/lib/index.js?!./node_modules/react-pdf/dist/pdf.worker.entry.js");

Environment

• Browser [Chrome 77]:
• React-PDF version [4.1.0]:
• React version [16.8.6]:
• Webpack version [4.29.6] using create-react-app

[oze4]

I noticed you are using create-react-app - in order to use this library with create-react-app you have to add the pdfjs worker differently than usual - see example code below.

Furthermore, It looks like the URL you are trying to load does not support CORS. Meaning, even after making the changes below, I get an error: "Failed to load PDF", with CORS being reported as the culprit within the console.

You can visit this example site to test loading PDF files... With that being said, the code below should get you started..

Please note, it is rather difficult finding a server hosting a PDF file that allows CORS.

At any rate, these changes solve your issue of 'endless file loading'..

import React, { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const PreviewPdf = () => {
  const [numberPages, useNumberPages] = useState(null);

  const OnDocumentLoadSuccess = ({ numPages }, useNumberPages) => {
    useNumberPages(numPages);
  };

    return (
      <>
        <Document
          file={"http://www.pdf995.com/samples/pdf.pdf"} // TRY TO DOWNLOAD THIS FILE AND HOST IT ON YOUR OWN SERVER!!
          onLoadSuccess={event => OnDocumentLoadSuccess(event, useNumberPages)}
        >
          <Page pageNumber={1} />
        </Document>
        <div>
          <p>Pages: {numberPages}</p>
        </div>
      </>
    );
};

[oze4]

@wojtekmaj perhaps the URL for the testing site should be more visible in the README? There is a link to the source code for the test site, but not a link to the test site itself..

Even though I knew the test site existed, I still struggled locating the URL (in order to post it in this thread).

I feel like that would help a bunch of people out. Just a thought... Cheers!