Help with webpack 4 and rendering a PDF via URL

[jdhorner]

Greetings everyone. I'll try and stay short and to the point.

In webpack.config.js, this is our module section:
(note we're using webpack 4, and are stuck at that version for the moment)

  module: {
    rules: [
      {
        test: /node_modules\/pdfjs-dist.*\.js$/gi,  // this is the newly added object for
        use: ['file-loader']                        // the file-loader module
      },
      {
        test: /\.(ts|tsx|js|jsx|mdx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: { transpileOnly: true }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(sass|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(jpeg|jpg|png|gif|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 100000 }
          }
        ]
      }
    ]
  },

In my PDFViewer.jsx component (truncated for brevity)

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

// note, URL is a fully-qualified pdf on a cdn; it requires no CORS of any kind
// and it works fine when pasted into an incognito window

<Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
  <Page pageNumber={pageNumber} />
</Document>

But I end up getting this console error in Google Chrome:

I have tried every combination of file-loader and url-loader that I can think of. But it seems nothing makes a difference. It's always the same error message. Obviously other local static files work fine, like images and fonts. But loading the pdf.worker.js file I just can't grasp. I feel like I must be missing something very obvious (and something I had thought importing from 'react-pdf/dist/esm/entry.webpack' would solve. But I am wrong.

I would love any help anyone can give me. All of the answers online seem to refer to loading local static PDFs.

[wojtekmaj]

I don't believe the file-loader rule for pdfjs-dist stuff is necessary. At least that's not what I do in Webpack 4 sample app.

[jdhorner]

Here's the entire component now:

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

const PDFViewer = () => {
  const [file, setFile] = useState(null);
  const [numPages, setNumPages] = useState(null);

  function onFileChange(event) {
    setFile(event.target.files[0]);
  }

  function onDocumentLoadSuccess({ numPages: nextNumPages }) {
    setNumPages(nextNumPages);
  }

  return (
    <div className="Example">
      <header>
        <h1>react-pdf sample page</h1>
      </header>
      <div className="Example__container">
        <div className="Example__container__load">
          <label htmlFor="file">
            Load from file: <input onChange={onFileChange} type="file" />
          </label>
        </div>
        <div className="Example__container__document">
          <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
            {Array.from(new Array(numPages), (el, index) => (
              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
            ))}
          </Document>
        </div>
      </div>
    </div>
  );
};

export default PDFViewer;

[jdhorner]

Oh my god.

If I change line 3
node_modules/react-pdf/dist/esm/entry.webpack.js
from this:

import pdfjsWorker from 'file-loader!pdfjs-dist/legacy/build/pdf.worker';

to this

import pdfjsWorker from 'url-loader!pdfjs-dist/legacy/build/pdf.worker';

it works!! But that seems hard-coded on your end. Is this something configurable??

[jdhorner]

I spoke too soon. It works for locally-selected files using your example. But switching it to use a URL as the file prop just gives a "failed to load PDF" message. (For the same PDF; The URL is here. If I download that PDF and use it as a local file it works; if I use it as a URL for the file prop, it fails) :/

[wojtekmaj]

Hm. No ideas in my head just yet. I have no idea why loading a file from different location would affect worker URL.

Just a note that you're not bound to bundler-specific entries, and you can easily build one yourself if you need to change something.

[jdhorner]

OK. Well finally, I was able to get this to work by doing my own network request for the file as a blob, setting that blob result in state, and then passing that state to the 's file prop. Works like a charm.

Sorry to have bothered you with all this. But it was helpful!