Error when clicking outside React component using PDF worker: a.cancel is not a function

[shajjhusein]

Configuration:
Web browser and its version: Chrome latest
Operating system and its version: MacOS
PDF.js version: 4.3.136
Is a browser extension: No
Steps to reproduce the problem:
Load the PDF file using @react-pdf-viewer/core.
Set the worker source globally using GlobalWorkerOptions.workerSrc.
Click outside the PDF viewer component.
Expected behavior:
Clicking outside the component should not cause any errors and the component should handle focus loss gracefully.

What went wrong:
The following error occurs when clicking outside the component:
_a.cancel is not a function TypeError: _a.cancel is not a function at http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:51389:79 at safelyCallDestroy (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:141878:5) at commitDeletionEffectsOnFiber (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:143046:23) at recursivelyTraverseDeletionEffects (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:142935:5) at commitDeletionEffectsOnFiber (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:143116:9) at recursivelyTraverseDeletionEffects (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:142935:5) at commitDeletionEffectsOnFiber (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:142964:11) at recursivelyTraverseDeletionEffects (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:142935:5) at commitDeletionEffectsOnFiber (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:143064:9) at recursivelyTraverseDeletionEffects (http://localhost:6006/vendors-node_modules_mui_material_Accordion_Accordion_js-node_modules_mui_material_AccordionA-532585.iframe.bundle.js:142935:5)
Code Snippet:

`import React, { useState, useEffect, useRef } from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/toolbar/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import { Box, useMediaQuery, useTheme } from '@mui/material';
import {
sxBoxMedia,
sxDocumentMediaBox,
sxOverflow,
} from '../../MediaViewer.styles';
import { GlobalWorkerOptions, PDFWorker } from 'pdfjs-dist';

type PdfViewerProps = {
documentUrl: string;
};

const DocumentMedia: React.FC = ({ documentUrl }) => {
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('md'));
const [key, setKey] = useState(0);
const defaultLayoutPluginInstance = defaultLayoutPlugin();

const workerInstance = useRef<PDFWorker | null>(null);

useEffect(() => {
GlobalWorkerOptions.workerSrc =
'https://unpkg.com/[email protected]/build/pdf.worker.min.mjs';

workerInstance.current = new PDFWorker();

if (!document.fullscreenElement) {
  setKey((prevKey: number) => prevKey + 1);
}

return () => {
  if (workerInstance.current) {
    workerInstance.current.destroy();
    workerInstance.current = null;
  }
};

}, [matches]);

return (







);
};

export default DocumentMedia;
`

[shajjhusein]

So currently, the issue is that when using the DocumentMedia component, the PDF works as expected. However, once I add this DocumentMedia component to a parent component, the parent component encounters issues similar to the one described above.

[shajjhusein]

The issue is coming from node_modules/@react-pdf-viewer/core/lib/cjs/core.js

   return function () {
           var _a;
           empty();
           (_a = renderTask.current) === null || _a === void 0 ? void 0 : _a.cancel();
       };
   }, []);

[taigrr]

I'd highly recommend moving over to react-pdf instead of react-pdf-viewer. react-pdf-viewer appears to be abandonware.

[denisLoncaric]

I encountered the same issue when zooming the document in and out...
Patched the @react-pdf-viewer/core package for now so it doesn't fail (with patch-package)...