PDF not displaying in production build

[samkim28]

Before you start - checklist

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

What are you trying to achieve? Please describe.
I have the implementation working successfully locally, but when I view it in a production environment, the PDF is not rendering. The file is retrieved from my API successfully, but the PDF viewer will not display it. No errors are thrown, the page numbers are displayed correctly, and a message is logged on load success.

Describe solutions you've tried

Index.html

  <script src="//cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/web/pdf_viewer.min.js"></script>
  <script>
    // pdfjsWorker.workerSrc = "//cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";
  </script>

I commented out the pdfjsWorker.workerSrc line because for some reason it wasn't working nicely.

Component

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

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

added worker src inside the component.

Webpack

  externals: {
    "pdfjs-dist": "pdfjsLib",
    "pdfjs-dist/build/pdf.worker.js": "pdfjsWorker"
  }

Locally, everything works great.
Production, no errors are thrown, but the PDF is not rendered/displayed. Just a blank white screen, with correct page numbers.

Environment

• Browser (if applicable): Version 72.0.3626.121
• React-PDF version [e.g. 3.0.4]: 4.0.5
• React version [e.g. 16.3.0]: 16.8.5
• Webpack version (if applicable) [e.g. 4.16.2]: 4.29.6

[bot19]

@samkim28 did you end up fixing this? I have a similar issue at my work. Tried a couple of things, including setting the "pdfjs.GlobalWorkerOptions.workerSrc" but while everything works locally, nothing works on production. Had to take out react-pdf.

[samkim28]

@bot19 I was reviewing any changes I had from my code above, and the two differences I have are hardcoding the pdf.js version in the script src, and importing pdfjs from 'react-pdf', while I import Document, Page from entry.webpack. Hope this helps!

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js"></script>

component

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

My webpack config is the same as above.