PDF not loading in create-react-app

I’m trying to display a pdf file that gets served to my client side react app from a flask server. I send the file from flask using the send_from_directory function.

My flask server returns the pdf and I create a Uint8Array from the response.data. The result is just a message that says Loading PDF…

How can I get the pdf to load? The onSourceSuccess runs so I know my file is there, and I see the Uint8Array in my state.

  var data = res.data;
  var len = data.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = data.charCodeAt(i);
  }
  this.setState({ pdf: bytes, error: '' });

Then in my render() method I have…

content = (
  <div>
    <Document
      file={{ data: pdf }}
      onLoadSuccess={this.onPDFLoad}
      onSourceSuccess={e => console.log('Source Success')}>
        <Page pageNumber={pageNumber} />
    </Document>
    <p> Page {pageNumber} of {numPages}</p>
  </div>
);

These are the imports I’m using…

import { Document, Page } from 'react-pdf/dist/entry.webpack';
// import { Page, Document } from 'react-pdf';
import { 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`;

I’ve gotten help mainly from this Stack Overflow page. https://stackoverflow.com/questions/45596329/display-pdf-in-reactjs

“react-scripts”: “3.0.0”, “react-pdf”: “^4.1.0”,

[DanielJackson-Oslo]

I have a similar situation.

“react-pdf”: “^4.1.0”, “react-scripts”: “^3.1.1” (as well as Electron)

Currently code looks like this: I currently have the pdf.worker.js copied to my output folder. There is no difference if I call it from CDN or not, using the code in the documentation.

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
import samplepdf from './sample.pdf' 
// This should be a valid file. I've tried adding in different ways as well.

export default class PdfViewer extends Component {
  state = {
    totalPages: null,
  }

  onDocumentLoadSuccess = (document) => {
    const { numPages } = document;
    this.setState({
      totalPages: numPages
    });
  };

  render() {
    const { totalPages } = this.state;

    return (
      <Document
      file={samplepdf}
      onLoadSuccess={this.onDocumentLoadSuccess}
      onLoadError={(error) => {
        console.error("Load error")
        console.error(error)
        debugger
      }}
      onSourceSuccess={(success) => {
        console.log("Source success")
        console.log(success)
        debugger
      }}
      onSourceError={(error) => {
        console.error("Source error")
        console.error(error)
        debugger
      }}
      >
        {Array.from(
          new Array(totalPages),
          (el, index) => (
              <Page 
                key={`page_${index + 1}`}
                pageNumber={index + 1}
              />
          ),
        )}
      </Document>
    );
  }
}

@wojtekmaj & @webdevbyjoss : onSourceError does not fire onSourceSuccess fires with no output? onLoadError does not fire. onLoadSuccess does not fire

The view just states “Loading PDF…” with no errors:

In the console I get the warning:

"/node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"

But from what I’ve been reading it should work, even with that warning?

Any ideas?

[marlo22]

Hi, I have an issue similiar to this one which @DanielJackson-Oslo reported. I’ve debugged a little and I see that this promise is unresolved https://github.com/wojtekmaj/react-pdf/blob/master/src/Document.jsx#L116. Nothing after line 116 is not called - neither then nor catch nor finally.

Interesting is fact, that a few weeks ago everything worked well and component’s code has’nt changed.