Using React-pdf, followed instructions but still does not load. How to fix this error?

setting up fake worker failed: cannot read property 'workermessagehandler' of undefined
react report viewer
react-pdf;base64
react-pdf debug
react-pdf server side
pdfjs-dist react example
react-pdf-scroll
react-pdf responsive

I have been following this to view my pdf on my website, for some reason it won't load and I'm not sure what I'm doing wrong.

Here is my code,

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

class Resume extends Component {
  constructor(props){
    super(props);

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

  onDocumentLoad = ( {numPages}) => {
    this.setState({numPages});
  }

  render() {
    const {pageNumber, numPages} = this.state;

    return (
      <div>
        <Document
          file = '../files/resume.pdf'
          onLoadSuccess = {this.onDocumentLoad}
          >
            <Page pageNumber = {pageNumber} />
        </Document>
        <p> Page {pageNumber} of {numPages}</p>
      </div>

    );
  }
}

export default Resume;

Here is my directory and files along with it!

I'm having a problem where the component just saying it's loading the pdf but never actually loads - no error messages, nothing. But for reference, here are the important parts of my component. Notice that I followed their instructions, React 16.6+ and this is for accessing a PDF via a URL:

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



  render () {
    return (<Document 
      // noData={console.log("No Data was found")}
      onLoadError={(error) => alert('Error while loading document! ' + error.message)}
      file={{ url: 'http://localhost:3000/resume.pdf' }}
      />)
  }

Failed to load PDF file · Issue #321 · wojtekmaj/react-pdf · GitHub, Using React-pdf, followed instructions but still does not load. How to fix this error? - html. I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.

Do you have the file-loader configured in your webpack config?

{
    test: /\.pdf$/,
    use: 'file-loader?name=[path][name].[ext]',
},

I'm using file-loader 3.0.1 and I can load the PDF's from my file system just fine.

You would also of course need to import it at the top like so:

import resume from '../files/resume.pdf';

wojtekmaj/react-pdf, And When I am using webpack or parcel it just showing loading PDF. from importing as file and directory giving path it is giving an error Failed to load PDF file. Using https in front of the url seems to resolve the problem for me: Webpack instructions still cause 'fake worker' to load mozilla/pdf.js#7612. 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 The browser freezes when rendering this pdf. It's small in size while there are other pdf's that are way bigger in size that renders smoothly. Steps

I faced this issue and found a solution here https://github.com/wojtekmaj/react-pdf/issues/321.

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

Add this to your constructor.

constructor(props){
        super(props);
        pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
    }

react-pdf, I followed instructions in documentation written for my React-PDF version; I have checked if this bug is not already reported browser console open) and files you have an issue with to help explain your problem. If you still need assistance with this matter, please do not hesitate to reply and I'll reopen. 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

React-pdf, react-scripts: 2.0.3 breaks dependencies in lib/display/api.js and build/pdf.js v3.​0.5 $ [X] I followed instructions in documentation written for my React-PDF version issue is not listed in Known issues; [x] If I have a problem with PDF rendering, to load fine with pdf.js@2.4.142 so it looks like they have fixed that bug in that  Install by executing npm install react-pdf or yarn add react-pdf. Import by adding import { Document } from 'react-pdf'. Use by adding <Document file="" />. file can be a URL, base64 content, Uint8Array, and more. Put <Page /> components inside <Document /> to render pages. Before you continue. React-PDF is under constant development. This

Pure react pdf, React renderer for creating PDF files on the browser, mobile and server. render into something, you still need to have React to make it work (and react-dom for client-side document generation). You can find instructions on how to do that here. It also has an API for styling them, using CSS properties and Flexbox layout. React-Pdf has a Font API that helps you load fonts from different sources and use in your PDF document. Those were some of the features that made me pick React-pdf. Also when I checked the Github Repository the maintainer Diego Muracciole is quite active and tries to respond to most issues opened.

Pdfkit react, If you load React from a <script> tag, these top-level APIs are available on the React Full React-PDF not only renders PDFs as images, but also as transparent text to solve the problem of building complex user interfaces in a consistent and If you already know React, you still need to learn some React-​Native-specific  The following dialog pops up when I attempt to open it: "Adobe Acrobat reader could not open '[filename].pdf' because it is either not a supported file type or because the file has been damaged (for example, it was sent as an email attachment and wasn't correctly decoded)." I contacted the sender and made them aware of our problem. They said

Comments
  • I'm not sure but I don't think it wants a file path, but a URL to send a request to. Try putting resume.pdf in the public directory and write file='/resume.pdf' instead.
  • tried it, same result :(
  • Try restarting the server after you added the file to the public directory.
  • still nothing. i do get compiling warnings saying stuff like :
  • require function is used in a way in which dependencies cannt be statically extracted ... (for ...build/pdf.jf)