Error while showing base64 PDF

[harsspartan118]

Before you start - checklist

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

What are you trying to achieve? Please describe.

I'm trying to show a base64 encoded PDF. I'm using the following snippet-

<Document file={`data:application/pdf;base64,JVBERi0xLjIgCjkgMCBvYmoKPDwKPj4Kc3RyZWFtCkJULyA5IFRmKFRlc3QpJyBFVAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCA1IDAgUgovQ29udGVudHMgOSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0tpZHMgWzQgMCBSIF0KL0NvdW50IDEKL1R5cGUgL1BhZ2VzCi9NZWRpYUJveCBbIDAgMCA5OSA5IF0KPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1BhZ2VzIDUgMCBSCi9UeXBlIC9DYXRhbG9nCj4+CmVuZG9iagp0cmFpbGVyCjw8Ci9Sb290IDMgMCBSCj4+CiUlRU9G`}>
    <Page pageNumber={1} />
</Document>

I receive the following error-

1. Loading Worker from “http://localhost:3003/pdf.worker.js” was blocked because of a disallowed MIME type (“text/html”).
2. Uncaught SyntaxError: expected expression, got '<' -pdf.worker.js:1
3. Error: Setting up fake worker failed: "window.pdfjsWorker is undefined".

Describe solutions you've tried

1. Tried pasting the base64 string in browser address bar. It shows the PDF normally.
2. Tried running this on Firefox and Chrome. Same error on both.
3. Tried using the embed tag in my code instead of this library. It shows PDF normally

Additional information

• I'm using the test file from the FAQ
• The tag is inside a modal as shown below-

<Modal
  {...this.props}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
  show={this.state.showPDF}
  onHide={() => this.setState({ showPDF: false })}
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter">
      Please provide your consent to continue
    </Modal.Title>
  </Modal.Header>
  <Modal.Body>
  <Document file={\`data:application/pdf;base64,JVBERi0xLjIgCjkgMCBvYmoKPDwKPj4Kc3RyZWFtCkJULyA5IFRmKFRlc3QpJyBFVAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCA1IDAgUgovQ29udGVudHMgOSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0tpZHMgWzQgMCBSIF0KL0NvdW50IDEKL1R5cGUgL1BhZ2VzCi9NZWRpYUJveCBbIDAgMCA5OSA5IF0KPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1BhZ2VzIDUgMCBSCi9UeXBlIC9DYXRhbG9nCj4+CmVuZG9iagp0cmFpbGVyCjw8Ci9Sb290IDMgMCBSCj4+CiUlRU9G\`}>
    <Page pageNumber={1} />
      {/*{Array.from(new Array(numPages), (el, index) => (
        <Page key={`page_${index + 1}`} pageNumber={index + 1} />
      ))}*/}
  </Document>
  {/*<embed src={`data:application/pdf;base64,${loadedFile}`}  type="application/pdf" width="100%"></embed>*/}
    <Container>
      <Form>
        <Form.Group>
          <Button variant="success" type="submit" onClick={this.handleConsent}>
            I Agree
          </Button>
        </Form.Group>
      </Form>
    </Container>
  </Modal.Body>
</Modal>

Environment

• Browser- Chrome 90, Firefox 88
• React-PDF version 3.5.2
• React version 16.13.1
• Webpack version- I don't know what this is

[harsspartan118]

Fixed the formatting.. Halp!

[wojtekmaj]

See #97 and others.

[wojtekmaj]

Duplicate of #97