react-pdf Ошибки: Uncaught SyntaxError: Unexpected token '<' // Error: Setting up fake worker failed: "Cannot read property 'Wor

Проблема

Для кода вида (пакет react-pdf):

<Document
  file={link}
  onLoadSuccess={null}
  onLoadError={onLoadError}
>
  <Page pageNumber={1} />
</Document>

Получаем в консоли браузера:

Warning: Setting up fake worker.

-- предупреждение в pdf.js:549, затем:

Uncaught SyntaxError: Unexpected token '

-- ошибка при попытка загрузить pdf.worker.js по неправильному пути ( /pdf.worker.js просто прибавляется к текущему url и такого файла там, конечно же, нет)

react_devtools_backend.js:2430 Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
at pdf.js:2336

Причина

Причина в том, что пакет react-pdf требует чтобы вы сами разобрались с подключением файла pdf.worker.js, о чем (кратко по некоторым пунктам) говорится в одном из разделов его документации.

Возможное решение 1: грузим файл pdf.worker.js с CDN

В корневом файле вашего приложения (ну или где-то выше начала использования react-pdf) добавьте код:

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

-- это вариант загрузки с cdn, который упоминается в документации.

Возможное решение 2: берем файл pdf.worker.js из зависимостей самого react-pdf

В моем случае подошел вот такой вариант с использованием file-loader и загрузкой файла pdf.worker.js из node_modules/ самого пакета react-pdf (т.е. уже с диска, а не из сети, что удобнее):

import { pdfjs } from 'react-pdf';
import PDFJSWorker from '!!file-loader!react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js';
pdfjs.GlobalWorkerOptions.workerSrc = PDFJSWorker;

Возможное решение 3: берем файл pdf.worker.js из отделно установленного пакет pdfjs-dist

Действуем так:

1. Устанавливаем pdfjs-dist
2. Далее пробуем, опять же, через file-loader загружаем pdf.worker.js из pdfjs-dist:

   import { pdfjs } from 'react-pdf';
   import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.js';
   pdfjs.GlobalWorkerOptions.workerSrc = PDFJSWorker;

   если все заработает -- хорошо, решение же для ошибки вида:

   react_devtools_backend.js:2430 UnknownErrorException {message: "The API version "2.4.456" does not match the Worker version "2.5.207".", name: "UnknownErrorException", details: "Error: The API version "2.4.456" does not match the Worker version "2.5.207"."}

   рассмотрим ниже.

Ошибка вида Error: The API version .... does not match the Worker version

Эта ошибка указывает на то, что мы используем неподходящую версию pdfjs-dist для работы с нашим пакетом react-pdf, в конкретном случае:

react_devtools_backend.js:2430 UnknownErrorException {message: "The API version "2.4.456" does not match the Worker version "2.5.207".", name: "UnknownErrorException", details: "Error: The API version "2.4.456" does not match the Worker version "2.5.207"."}

-- в моем случае используется слишком новая 2.5.207 вместо требуемой 2.4.456.

В качестве решения обновим пакет (в терминале), поставив ту версию, что требует react-pdf, моем случае команда выглядела как

npm install pdfjs-dist@2.4.456

-- после чего приведенный выше вариант подключения воркера:

import { pdfjs } from 'react-pdf';
import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.js';
pdfjs.GlobalWorkerOptions.workerSrc = PDFJSWorker;

должен заработать