I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });   
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}
Answer from Arntor on Stack Overflow
🌐
npm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
2 weeks ago - Generic build of Mozilla's PDF.js library.. Latest version: 5.4.449, last published: 12 days ago. Start using pdfjs-dist in your project by running `npm i pdfjs-dist`. There are 2279 other projects in the npm registry using pdfjs-dist.
      » npm install pdfjs-dist
    
Published   Nov 29, 2025
Version   5.4.449
Top answer
1 of 5
25

I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });   
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}
2 of 5
9

This import will clear the undefined issue:

import * as pdfjsLib from "pdfjs-dist/build/pdf";
Discussions

Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
🌐 github.com
17
August 13, 2024
PDFjs-dist error
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
🌐 github.com
27
April 14, 2024
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅)
If you've installed pdfjs-dist as a direct dependency and the version is not matching the pdfjs-dist that react-pdf depends on, you may get an error that looks like this: Warning: UnknownErrorE... More on github.com
🌐 github.com
1
2
PDF Viewer
Most browsers can show PDF perfectly out of the box. Just put source of your PDF in and it will: Show that file is loading on slow connection Show file, if it is supported Show fallback if it is not supported All with few lines of HTML like this: Sorry, your browser doesn't support PDF preview. Download More on reddit.com
🌐 r/reactjs
8
6
September 26, 2024
People also ask

How to use PDF.js in React?
To use PDF.js in React, import the pdfjs-dist package and create a component that loads and displays PDF files using the library's API.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
What is PDF.js used for?
PDF.js is used for viewing, parsing, and rendering PDF files directly in the browser, providing a seamless user experience.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Is PDF.js free to use?
Yes, PDF.js is free and open-source, distributed under the Apache 2.0 license, allowing for both personal and commercial use.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
🌐
Nutrient
nutrient.io › blog › sdk › how to build a reactjs viewer with pdfjs
Build a React PDF viewer with PDF.js and Next.js: Step-by-step tutorial
July 16, 2025 - This can be done in your React component or globally in your application setup. Example code: import * as pdfjsLib from "pdfjs-dist"; pdfjsLib.GlobalWorkerOptions.workerSrc = "/path-to/pdf.worker.min.mjs"; Problem: Different browsers may have varying levels of support for HTML5 features used by PDF.js, leading to inconsistencies in rendering or functionality.
🌐
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Starred by 10.7K users
Forked by 981 users
Languages   TypeScript 94.3% | CSS 5.6% | HTML 0.1%
🌐
CodeSandbox
codesandbox.io › examples › package › pdfjs-dist
pdfjs-dist examples - CodeSandbox
react-pdf-viewer-vite · pdfjs-dist-vue · react-doc-viewerDocument viewer for react. Renders online/local documents. @react-pdf-viewer/examples · flexcomAplicacion para la comunicacion interna. pdf-viewer (forked) lex961Find more examples or templates · AboutGeneric build of Mozilla's PDF.js library.6,183,977Weekly Downloads ·
🌐
React PDF
blog.react-pdf.dev › understanding-pdfjs-layers-and-how-to-use-them-in-reactjs
Using PDF.js Layers in React.js Effortlessly
July 17, 2025 - The processLoadingTask method starts the PDF loading process using PDFJS.getDocument(source) from pdfjs-dist.
Find elsewhere
🌐
React PDF Viewer
react-pdf-viewer.dev › docs › getting-started
Getting started - React PDF Viewer
The latest version of `pdfjs-dist` (`3.4.120`) uses some modern JavaScript features. It requires additional configurations.
🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 1855
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router · Issue #1855 · wojtekmaj/react-pdf
August 13, 2024 - import { Box, CircularProgress, Pagination, Stack, Typography } from '@mui/material'; import React, { useState } from 'react'; import { DocumentText } from 'iconsax-react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
Published   Aug 13, 2024
🌐
DhiWise
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
December 6, 2024 - Integrating PDF.js into a React application is straightforward. You can use the pdfjs-dist package to include the library in your project.
🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 1822
PDFjs-dist error · Issue #1822 · wojtekmaj/react-pdf
April 14, 2024 - When pdfjs-dist is imported from react-pdf (or components that use pdfjs-dist) or even the pdfjs-dist is imported, the error occures:
Published   Jun 06, 2024
🌐
GitHub
github.com › wojtekmaj › react-pdf › discussions › 1520
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅) · wojtekmaj/react-pdf · Discussion #1520
In this case I have this "pdfjs-dist": "3.7.107" in my package.json, but react-pdf depends on "pdfjs-dist": "3.6.172".
Author   wojtekmaj
🌐
PSPDFKit
pspdfkit.com › blog › sdk › how to build a reactjs viewer with pdfjs
How to Build a React PDF Viewer with PDF.js
July 16, 2025 - This can be done in your React component or globally in your application setup. Example code: import * as pdfjsLib from "pdfjs-dist"; pdfjsLib.GlobalWorkerOptions.workerSrc = "/path-to/pdf.worker.min.mjs"; Problem: Different browsers may have varying levels of support for HTML5 features used by PDF.js, leading to inconsistencies in rendering or functionality.
🌐
Snyk
snyk.io › advisor › pdfjs-dist › functions › pdfjs-dist.globalworkeroptions
How to use the pdfjs-dist.GlobalWorkerOptions function in pdfjs-dist | Snyk
At the time of writing this, it was // packages/app/dist/ PDFjs.GlobalWorkerOptions.workerSrc = './pdf.worker.js' export default function init () { registry.add('fileViewer', PDFViewer, { stream: false, match: pdfMatcher }) } function pdfMatcher (file) { if (!file.mimetype) return false return file.mimetype.match(/application\/pdf/) } export class PDFViewer extends React.Component { constructor (props) { super(props) mozilla / pdf.js / examples / browserify / main.js View on Github ·
🌐
React PDF Viewer
react-pdf-viewer.dev › docs › basic-usage
Basic usage - React PDF Viewer
return <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">...</Worker>;
🌐
npm Trends
npmtrends.com › pdfjs-dist-vs-pdfmake-vs-pdfobject-vs-react-pdf-vs-react-to-pdf
pdfjs-dist vs pdfmake vs pdfobject vs react-pdf vs react-to-pdf | npm trends
Comparing trends for pdfjs-dist ... 2.3.1 which has 139,194 weekly downloads and 2,496 GitHub stars vs. react-pdf 10.2.0 which has 2,318,614 ......
🌐
StackBlitz
stackblitz.com › edit › react-pdfjs-dist
React Pdfjs Dist - StackBlitz
Starter project for React apps that exports to the create-react-app CLI.
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
October 9, 2025 - then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
      » npm install react-pdf
    
Published   Oct 09, 2025
Version   10.2.0
Author   Wojciech Maj
🌐
GitHub
github.com › wojtekmaj › react-pdf › blob › main › packages › react-pdf › README.md
react-pdf/packages/react-pdf/README.md at main · wojtekmaj/react-pdf
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Author   wojtekmaj
🌐
CodeSandbox
codesandbox.io › s › pdfjs-dist-csdsxo
pdfjs-dist - CodeSandbox
November 4, 2022 - pdfjs-dist by Chocobe using @react-pdf-viewer/core, @react-pdf-viewer/default-layout, @react-pdf-viewer/full-screen, @react-pdf-viewer/highlight, @react-pdf-viewer/open, @react-pdf-viewer/page-navigation, @react-pdf-viewer/print, @react-pdf-viewer/scroll-mode, @react-pdf-viewer/search
Published   Nov 04, 2022
Author   Chocobe