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
🌐
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
🌐
GitHub
github.com › mozilla › pdfjs-dist
GitHub - mozilla/pdfjs-dist: Generic build of PDF.js library.
As of February 2023, releases are pushed directly to NPM and may not be visible here.
Starred by 1.3K users
Forked by 568 users
Languages   JavaScript 99.2% | CSS 0.8%
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

🌐
npm
npmjs.com › search
keywords:pdfjs-dist - npm search
![npm](https://img.shields.io/npm/dw/@am-77/svelte-pdf?style=flat-square) ![npm](https://img.shields.io/npm/v/@am-77/svelte-pdf?style=flat-square) ... Simple PDF React component with vertical scroll bar (pdfjs-dist, ES6 syntax, Babel, Browserify).
🌐
Mozilla
mozilla.github.io › pdf.js › getting_started
PDF.js - Getting Started
https://www.jsdelivr.com/package/npm/pdfjs-dist · https://cdnjs.com/libraries/pdf.js · https://unpkg.com/pdfjs-dist/ Note that we only mention the most relevant files and folders.
Top answer
1 of 6
14

This issue seems to arise due to esModule option introduced in [email protected].

The fix for this was merged in (pre-release) [email protected]

You can fix this by either upgrading pdfjs-dist to v2.6.347 OR downgrading worker-loader to v2.0.0

2 of 6
7

I just had to solve this issue myself...

This issue

Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'

Is caused by worker-loader loading NodeTargetPlugin, which in turn runs require("module") which I think (but I'm not 100%) is for native node modules, which when running Webpack targeted for web is not relevant

This issue can be mitigated with Webpack config

{
  node: {
    module: "empty"
  }
}

Afterwards, things move along farther, but I needed further mitigations:

import pdfjsLib from "pdfjs-dist/webpack";

This runs pdfjs-dist/webpack.js:27 which is

var PdfjsWorker = require("worker-loader!./build/pdf.worker.js");

Which is attempting to load pdf.worker.js (which worker-loader should be packaging) and then tries to instantiate the class:

pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();

The issue I had was that Webpack packaged pdf.worker.js as an esModule (the default for worker-loader), so the way it was require'd needs to be unwrapped with the default property on the imported esModule (said another way, the instantiation would have to be new PdfjsWorker.default()

I was able to mitigate this with the NormalModuleReplacementPlugin plugin, which is able to re-write the require statement based on a regex match/replace, which is matching the original require string and replacing it with one that sets the worker-loader option esModule=false, followed by the absolute path to the pdf.worker.js file on the local system:

new webpack.NormalModuleReplacementPlugin(
  /worker-loader!\.\/build\/pdf\.worker\.js$/,
  "worker-loader?esModule=false!" + path.join(__dirname, "../", "node_modules", "pdfjs-dist", "build", "pdf.worker.js")
)

It's important to match the complete original require string of /worker-loader!\.\/build\/pdf\.worker\.js$/ and not just the pdf.worker.js part, because you could end up in an infinite replace loop.

You need to fix the replacement string to be a proper path for your project, which would probably be

"worker-loader?esModule=false!" + path.join(__dirname, "node_modules", "pdfjs-dist", "build", "pdf.worker.js")

I have a ../ in my path because this code is being executed inside storybooks .storybook/ folder, so I have go up a directory to get to node_modules/

And with those two changes, everything for PDF.js seems to be working.

And lastly, if you want to ignore the warnings about the missing FetchCompileWasmPlugin and FetchCompileAsyncWasmPlugin modules, you can setup the webpack IgnorePlugin to just ignore these imports, my assumption is they're WASM based and not actually needed

plugins: [
  new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileWasmPlugin$/ }),
  new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileAsyncWasmPlugin$/ })
]

I'm guessing there might be some out-of-date mismatch of worker-loader and the modules in the currently installed Webpack version, but these WASM modules don't seem to be necessary for our purposes

🌐
npm
npmjs.com › package › @bundled-es-modules › pdfjs-dist
@bundled-es-modules/pdfjs-dist - npm
mirror of pdfjs-dist, bundled and exposed as ES module. Latest version: 3.6.172-alpha.1, last published: 3 years ago. Start using @bundled-es-modules/pdfjs-dist in your project by running `npm i @bundled-es-modules/pdfjs-dist`. There are 15 other projects in the npm registry using @bundled-es-modules/pdfjs-dist.
      » npm install @bundled-es-modules/pdfjs-dist
    
Published   May 12, 2023
Version   3.6.172-alpha.1
Author   Rob Resendez
🌐
GitHub
github.com › mozilla › pdf.js › wiki › setup-pdf.js-in-a-website
Setup PDF.js in a website
Install the PDF.js dependency in your project: npm install pdfjs-dist --save-dev · To use the library in your project add require('pdfjs-dist') to your file requires and build your project normally.
Author   mozilla
Find elsewhere
🌐
npm
npmjs.com › package › pdfjs-dist-for-node
pdfjs-dist-for-node - npm
Generic build of Mozilla's PDF.js library.. Latest version: 1.0.892-rc.1, last published: 11 years ago. Start using pdfjs-dist-for-node in your project by running `npm i pdfjs-dist-for-node`. There are 2 other projects in the npm registry using pdfjs-dist-for-node.
      » npm install pdfjs-dist-for-node
    
Published   Dec 10, 2014
Version   1.0.892-rc.1
Author   Juan Benet
🌐
jsDelivr
jsdelivr.com › package › npm › pdfjs-dist-for-node
pdfjs-dist-for-node CDN by jsDelivr - A CDN for npm and GitHub
December 10, 2014 - A free, fast, and reliable CDN for pdfjs-dist-for-node. Generic build of Mozilla's PDF.js library.
Published   Oct 09, 2014
🌐
npm
npmjs.com › package › @types › pdfjs-dist
@types/pdfjs-dist - npm
This is a stub types definition for @types/pdfjs-dist (http://mozilla.github.io/pdf.js/).
      » npm install @types/pdfjs-dist
    
Published   Oct 28, 2021
Version   2.10.378
🌐
GitHub
github.com › bundled-es-modules › pdfjs-dist
GitHub - bundled-es-modules/pdfjs-dist: This is a mirror of pdfjs-dist, bundled and exposed as an ES module
This is a mirror of pdfjs-dist, bundled and exposed as an ES module · npm install @bundled-es-modules/pdfjs-dist ·
Starred by 23 users
Forked by 14 users
Languages   JavaScript
🌐
npm
npmjs.com › search
pdfjs - npm search
npm · Sign UpSign In · Sort by: ... · Recently published · exact match · A Portable Document Format (PDF) generation library targeting both the server- and client-side. pdf · generator · rkusa• 2.5.4 • 5 months ...
🌐
npm
npmjs.com › package › pdfjs-dist-viewer-min
pdfjs-dist-viewer-min - npm
Generic minified build of Mozilla's PDF.js library including the viewer component.. Latest version: 3.11.174, last published: a year ago. Start using pdfjs-dist-viewer-min in your project by running `npm i pdfjs-dist-viewer-min`. There are no other projects in the npm registry using pdfjs-dist-viewer-min.
      » npm install pdfjs-dist-viewer-min
    
Published   Jul 13, 2024
Version   3.11.174
Author   Mozilla
🌐
npm
npmjs.com › package › pdf-dist
pdf-dist - npm
PDFJS for Reboost. Latest version: 1.0.0, last published: 5 years ago. Start using pdf-dist in your project by running `npm i pdf-dist`. There are 2 other projects in the npm registry using pdf-dist.
      » npm install pdf-dist
    
Published   Jul 21, 2020
Version   1.0.0
Author   Dat Le
🌐
GitHub
github.com › mozilla › pdf.js › issues › 12379
Readme should have `npm install pdf.js` on how to use... And a better tutorial. (I've added a suggestion on how could be improved) · Issue #12379 · mozilla/pdf.js
September 15, 2020 - I think is a big oversight forgetting to add this, I had to open package.json to figure out if was even on npm... I haven't seen a readme without npm install ... for long time. and this seem like a big project.
Published   Sep 15, 2020
🌐
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.
🌐
Npm
npm.io › package › pdfjs-dist
Pdfjs-dist NPM | npm.io
Check Pdfjs-dist 5.0.375 package - Last release 5.0.375 with Apache-2.0 licence at our NPM packages aggregator and search engine.