Warning: setting up fake worker (pdf.mjs)

[dandubya]

Using "react-fast-scroll-pdf": "^1.3.1", the following warning is written to the console:

Warning: Setting up fake worker.

(This warning appeared in previous versions of the package, too.)

This appears to be generated by the underlying pdfjs-dist dependency. I have followed the pdfjs-dist documentation for setting up a worker, and I've looked at many repos that do it, but none of the recommended solutions have worked for me. (The warning is there because the performance is reportedly worse if the fake worker is used, instead of the actual worker.)

I'm using Next.js with the App Router. Some relevant packages include:

• "react": "^18.3.1"
• "next": "^14.2.6"
• "pdfjs-dist": "^4.5.136"

What is the correct way to set up the worker with react-fast-scroll-pdf, to eliminate the warning?

[dandubya]

Here is my .tsx source:

import { useCallback, useEffect, useRef, useState } from "react";
import { usePDF } from "../../node_modules/react-fast-scroll-pdf";
import { Button } from "../shared/ui/button";
import { ExpandIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";

export default function FastPDFViewer({pdfBytes}: {pdfBytes:Uint8Array}) {
	  
	const scrollContainerRef = useRef<HTMLDivElement>(null);
	const viewerRef = useRef<HTMLDivElement>(null);
	const [zoom, setZoom] = useState<number>(1);
	const {
		renderCurrentPage,
		changeZoomStart,
		changeZoomEnd,
		pages,
		viewportWidth,
	} = usePDF({
		source: {
			data: pdfBytes
		},
		scrollContainer: scrollContainerRef.current,
		viewer: viewerRef.current
	});

	const ZOOM_CHANGE: number = 0.1;

	const zoomChangeStart = useCallback((newZoom: number) => {
		// This causes the pages to zoom in, but in low quality.
		changeZoomStart(newZoom);
	}, [changeZoomStart]);

	const zoomIn = useCallback(() => {
		const newZoom = zoom + ZOOM_CHANGE;
		if (newZoom > 0) {
			setZoom(newZoom);
			changeZoomStart(newZoom);
		}
	}, [changeZoomStart, zoom]);

	const zoomOut = useCallback(() => {
		const newZoom = zoom - ZOOM_CHANGE;
		if (newZoom < 2) {
			setZoom(newZoom);
			changeZoomStart(newZoom);
		}
	}, [changeZoomStart, zoom]);

	const zoomEnd = useCallback(() => {
		changeZoomEnd();
	}, [changeZoomEnd]);

	const fitPage = useCallback(() => {
		if (viewportWidth && scrollContainerRef.current) {
			const initial = viewportWidth / zoom;
			const scale = (scrollContainerRef.current.offsetWidth / initial) * 0.95;
			setZoom(scale);
			zoomChangeStart(scale);
			zoomEnd();
			return scale;
		}
		return undefined;
	}, [viewportWidth, zoom, zoomChangeStart, zoomEnd]);
	
	useEffect(() => {
		const oldRef = scrollContainerRef.current;
		scrollContainerRef.current?.addEventListener("scroll", renderCurrentPage);

		return () => oldRef?.removeEventListener("scroll", renderCurrentPage);
	}, [fitPage, renderCurrentPage]);

	return (
		<>
		<div ref={scrollContainerRef} className="!w-full !h-auto" style={{ overflow: "scroll" }}>
			<div id="viewer" ref={viewerRef} className="grid gap-x-0 gap-y-3 text-center drop-shadow-md w-full h-auto dark:[&_img]:invert">
				{pages}
			</div>
		</div>
		<div className="flex flex-col text-center">
			<Button size="icon" className="border bg-slate-400 text-slate-100 dark:bg-slate-600 dark:text-slate-200 ml-1 my-1 p-0" onMouseDown={zoomIn} onMouseUp={zoomEnd}><ZoomInIcon/></Button>
			<Button size="icon" className="border bg-slate-400 text-slate-100 dark:bg-slate-600 dark:text-slate-200 ml-1 my-1" onMouseDown={zoomOut} onMouseUp={zoomEnd}><ZoomOutIcon/></Button>
			<Button size="icon" className="border bg-slate-400 text-slate-100 dark:bg-slate-600 dark:text-slate-200 ml-1 my-1" onMouseUp={fitPage}><ExpandIcon/></Button>
		</div>
		</>
	);
};