Here's a super ugly workaround for client-components, until something better is proposed (I hate this too, but it works):

npm i pdfjs-dist

Edit 1: A hook might be better for reusability:

Create Your Hook

"use client";
import {useEffect} from "react";
import * as PDFJS from "pdfjs-dist/types/src/pdf";

export const usePDFJS = (onLoad: (pdfjs: typeof PDFJS) => Promise<void>, deps: (string | number | boolean | undefined | null)[] = []) => {
  
  const [pdfjs, setPDFJS] = useState<typeof PDFJS>(null);
  
  // load the library once on mount (the webpack import automatically sets-up the worker)
  useEffect(() => {
    import("pdfjs-dist/webpack.mjs").then(setPDFJS)
  }, []);

  // execute the callback function whenever PDFJS loads (or a custom dependency-array updates)
  useEffect(() => {
    if(!pdfjs) return;
    (async () => await onLoad(pdfjs))();
  }, [ pdfjs, ...deps ]);
}

Typescript Fix

Your compiler might complain about a typescript issue; if so, I just added an index.d.ts (note the .d.ts) at the same level as my hook:

declare module 'pdfjs-dist/webpack.mjs' { export * from 'pdfjs-dist' }

Use Your Hook

"use client";
import {usePDFJS} from "...";


export default function Page() {
  usePDFJS(async (pdfjs) => {
    console.log(pdfjs)
  })
}
Answer from Nicholas Barrow on Stack Overflow
Top answer
1 of 6
9

Here's a super ugly workaround for client-components, until something better is proposed (I hate this too, but it works):

npm i pdfjs-dist

Edit 1: A hook might be better for reusability:

Create Your Hook

"use client";
import {useEffect} from "react";
import * as PDFJS from "pdfjs-dist/types/src/pdf";

export const usePDFJS = (onLoad: (pdfjs: typeof PDFJS) => Promise<void>, deps: (string | number | boolean | undefined | null)[] = []) => {
  
  const [pdfjs, setPDFJS] = useState<typeof PDFJS>(null);
  
  // load the library once on mount (the webpack import automatically sets-up the worker)
  useEffect(() => {
    import("pdfjs-dist/webpack.mjs").then(setPDFJS)
  }, []);

  // execute the callback function whenever PDFJS loads (or a custom dependency-array updates)
  useEffect(() => {
    if(!pdfjs) return;
    (async () => await onLoad(pdfjs))();
  }, [ pdfjs, ...deps ]);
}

Typescript Fix

Your compiler might complain about a typescript issue; if so, I just added an index.d.ts (note the .d.ts) at the same level as my hook:

declare module 'pdfjs-dist/webpack.mjs' { export * from 'pdfjs-dist' }

Use Your Hook

"use client";
import {usePDFJS} from "...";


export default function Page() {
  usePDFJS(async (pdfjs) => {
    console.log(pdfjs)
  })
}
2 of 6
4

There's a pretty lengthy discussion over on Github issues where people have managed to get it working either on client:

I decided to follow a simple path, I downloaded the stable version from the official website. I put all the files in the public folder. Then I added this tag to my component:

<script src="/pdfjs/pdf.mjs" type="module" />

then adding code in useEffect:

  const pdfjs = window.pdfjsLib as typeof import('pdfjs-dist/types/src/pdf')
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.min.mjs');
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const pdfDocument = pdfjs.getDocument('http://localhost:3000/pdf-files/myFile.pdf')

  console.log('pdfDocument', pdfDocument);

Or server-side, via appDir (e.g. app/api/pdf/route.js)

import * as pdfjs from 'pdfjs-dist/build/pdf.min.mjs';
await import('pdfjs-dist/build/pdf.worker.min.mjs');

export async function POST(req, res) {
  const pdf = await pdfjs.getDocument(
    'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
  ).promise;
  const page = await pdf.getPage(1);
  const textContent = await page.getTextContent();
  return NextResponse.json({ message: textContent }, { status: 200 });
}

I've personally just tested this last API-one on Next.js 14.1.1 and it works just fine after a npm install pdfjs-dist

🌐
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
🌐
GitHub
github.com › vercel › next.js › issues › 58313
Import pdfjs-dist not working correctly · Issue #58313 · vercel/next.js
November 10, 2023 - The ESM package pdfjs-dist should be imported correctly.
Published   Nov 10, 2023
🌐
GitHub
github.com › mozilla › pdf.js › discussions › 17523
How to use pdf.js-dist in next js · mozilla/pdf.js · Discussion #17523
How to configure pdf.js-dist to be able to run in next js next-js version:- 12.3.1 This is the error I get: ./node_modules/pdfjs-dist/build/pdf.mjs Module parse failed: The top-level-await experime...
Author   mozilla
🌐
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 - Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
🌐
Lazypandatech
lazypandatech.com › blog › NextJs › 38 › How-to-use-PDF.js-in-React-Next.js-Application
How to use PDF.js in React Next.js Application
March 6, 2025 - How to create your first NextJS application with TypeScript SCSS and Bootstrap v5.0 · Once you set up the React with Next.js project, you need to install the pdf-dist npm package. ... PDFJS.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;
🌐
Stack Overflow
stackoverflow.com › questions › tagged › pdfjs-dist
Newest 'pdfjs-dist' Questions - Stack Overflow
I'm using pdfjs-dist (version 4.10.38) in a Next.js 15 App Router project ([email protected]) to render and interact with PDFs.
Find elsewhere
🌐
npm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
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
🌐
DEV Community
dev.to › ryaddev › pdf-viewer-in-nextjs-134-using-react-pdf-viewer-nom
PDF Viewer in Nextjs 13.4 using @react-pdf-viewer - DEV Community
October 19, 2023 - // components/PdfViewer.jsx "use client"; import { Viewer, Worker } 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/default-layout/lib/styles/index.css"; const PdfViewer = ({ url }) => { const defaultLayoutPluginInstance = defaultLayoutPlugin(); return ( <div className="h-screen w-screen"> <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js"> <Viewer fileUrl={url} plugins={[defaultLayoutPluginInstance]} /> </Worker> </div> ); }; export default PdfViewer; In this component: We import the necessary components and styles from ·
🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 136
react-pdf is not working when build with nextjs · Issue #136 · wojtekmaj/react-pdf
December 17, 2017 - It's working fine on development mode with nextjs. However when I build my nextjs app, it gives me an error that worker.js is not found(404). It looks that *.worker.js is existed in .next director. Can you point me to a way to resolve it...
Published   Jan 23, 2018
🌐
CodeSandbox
codesandbox.io › s › pdf-demo-nextjs-czymh
pdf-demo-nextjs - CodeSandbox
July 15, 2021 - pdf-demo-nextjs by lazypanda-instance using next, pdfjs-dist, react, react-dom
Published   May 23, 2021
Author   lazypanda-instance
🌐
Skool
skool.com › universityofcode › issue-using-pdfjs-dist-with-nextjs-14
Issue using pdfjs-dist with next.js 14 · University of Code
Hello guys, has anyone worked with pdfjs-dist for extracting texts from pdfs? I am trying to parse a pdf, extract the texts and also take screenshots of the pag
🌐
PSPDFKit
pspdfkit.com › blog › 2021 › how-to-build-a-nextjs-pdf-viewer-with-pspdfkit
Next.js PDF viewer with React-PDF and Nutrient SDK
July 3, 2025 - import { Document, Page, pdfjs } from "react-pdf"; import "react-pdf/dist/Page/TextLayer.css"; import "react-pdf/dist/Page/AnnotationLayer.css"; pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url, ).toString(); const PDFViewerClient = () => { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); const onDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); }; const goToPrevPage = () => setPageNumber(pageNumber - 1 <= 1 ?
🌐
DhiWise
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
December 6, 2024 - To import PDF.js in your JavaScript project, you can use a CDN or install it via NPM. The pdfjs-dist package provides a convenient way to include the library in your project, allowing you to start rendering PDFs with minimal setup.
🌐
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.
🌐
Reddit
reddit.com › r/nextjs › having trouble with react-pdf on next.js 13
r/nextjs on Reddit: Having trouble with react-pdf on Next.js 13
June 22, 2023 -

Hi everyone,

I'm updating a project to Next.js 13.4.12 and I'm having issues with react-pdf. I built a class to open a modal and show pdfs inside of it. You can find the code, which worked in Next.js 12, in the picture

I get the error you can see in the second picture, Can't resolve '../build/Release/canvas.node'

This happens as soon as I import anything from react-pdf (v 7.3.3).

Any idea how to fix it?

🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 1699
Render breaks in nextjs 14.1.0 - ReferenceError: Can't find variable: exports leads to "Failed to load PDF file." · Issue #1699 · wojtekmaj/react-pdf
November 17, 2023 - I have a site using nextjs app dir, rendering PDFs in a client component. Was working fine up to 14.0.3. Upgrading to 14.1.0, it now throws an error on client side and cannot load the PDF. Minimally, my components loads the following outside of the component: import { pdfjs } from "react-pdf"; import { Document, Page } from "react-pdf"; import "react-pdf/dist/Page/AnnotationLayer.css"; pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.js", import.meta.url ).toString();
Published   Jan 19, 2024