@react-pdf-kit/viewer@^2.0.0 requires pdfjs-dist as a peer dependency with a default version of 5.4.530. This means you do not need to manually install pdfjs-dist unless you want to use a different version.

This guide walks you through overriding the default pdfjs-dist version in two steps:

1. Install the version you need.
2. Configure your specific framework to use it.

Step 1: Install pdfjs-dist

Here is how you can install package pdfjs-dist with the latest version which is above 5.4.530.

Before configuring any framework, you must first install pdfjs-dist with the version you want to use. This step is required regardless of which framework you use.

1. Install pdfjs-dist with the version you want to use:

   bun

     bun add pdfjs-dist

   npm

     npm install pdfjs-dist --save

   pnpm

     pnpm add pdfjs-dist

   yarn

     yarn add pdfjs-dist

   Tip

   Installing pdfjs-dist without specifying a version will install the latest version.

   • To specify a version, add a suffix like pdfjs-dist@version (e.g., npm install pdfjs-dist@5.4.624).
   • To override version 4.10.38 or below could affect the functionalities of React PDF Kit

2. Ensure the installed version is used by adding an override in your package.json:

   bun

   package.json

   {
     "overrides": {
       "pdfjs-dist": "the installed version"
     }
   }

   npm

   package.json

   {
     "overrides": {
       "pdfjs-dist": "the installed version"
     }
   }

   pnpm

   package.json

   {
     "pnpm": {
       "overrides": {
         "pdfjs-dist": "the installed version"
       }
     }
   }

   yarn

   package.json

   {
     "resolutions": {
       "pdfjs-dist": "the installed version"
     }
   }

Step 2: Configure Your Framework

After installing pdfjs-dist, pick the section below that matches your project’s framework and follow the additional configuration steps.

Using React with Webpack

1. It’s important to complete Step 1 of pdfjs-dist installation before proceeding

2. Install package copy-webpack-plugin:

   bun

     bun add copy-webpack-plugin --dev

   npm

     npm install copy-webpack-plugin --save-dev

   pnpm

     pnpm install copy-webpack-plugin -D

   yarn

     yarn add copy-webpack-plugin -D

3. Add configurations to webpack.config.js:

   webpack.config.js

   const CopyPlugin = require('copy-webpack-plugin')
   
   module.exports = {
     // ...config
     plugins: [
       new CopyPlugin({
         patterns: [
           {
             from: 'node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs',
             to: 'pdf.worker.min.mjs'
           }
         ]
       })
       /// ...other plugins
     ]
   }

4. Add /pdf.worker.min.mjs to the workerUrl prop in the RPConfig component:

   JSX

   src/App.jsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import React from 'react'
   
   function App() {
     return (
       <div>
         <RPConfig workerUrl={'/pdf.worker.min.mjs'}>
           ...
         </RPConfig>
       </div>
     )
   }
   
   export default App

   TSX

   src/App.tsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import React from 'react'
   
   function App() {
     return (
       <div>
         <RPConfig workerUrl={'/pdf.worker.min.mjs'}>
           ...
         </RPConfig>
       </div>
     )
   }
   
   export default App

Using React with Vite

1. It’s important to complete Step 1 of pdfjs-dist installation before proceeding

2. Add configurations to vite.config.js or vite.config.ts:

   vite.config.ts

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     // ...config
     optimizeDeps: {
       include: ['pdfjs-dist']
       // ...
     }
   })

3. Add the worker URL to the workerUrl prop in the RPConfig component:

   JSX

   src/App.jsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
   
   function AppPdfViewer() {
     return (
       <RPConfig workerUrl={workerSrc}>
         ...
       </RPConfig>
     )
   }
   export default AppPdfViewer

   TSX

   src/App.tsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
   
   function AppPdfViewer() {
     return (
       <RPConfig workerUrl={workerSrc}>
         ...
       </RPConfig>
     )
   }
   export default AppPdfViewer

Next.js (v15 and later) — Turbopack

1. It’s important to complete Step 1 of pdfjs-dist installation before proceeding

2. Add the worker URL to the workerUrl prop in the RPConfig component:

   JSX

   app/components/AppProviders.jsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import React from 'react'
   
   const workerSrc = new URL(
     "pdfjs-dist/build/pdf.worker.min.mjs",
     import.meta.url,
   ).toString();
   
   function AppProviders({ children, ...props }) {
       return (
         <RPConfig workerUrl={workerSrc} {...props}>
           {children}
         </RPConfig>
       )
   }
   
   export default AppProviders

   TSX

   app/components/AppProviders.tsx

   import { RPConfig, RPConfigProps } from '@react-pdf-kit/viewer'
   import React from 'react'
   import { type PropsWithChildren } from 'react'
   
   const workerSrc = new URL(
     "pdfjs-dist/build/pdf.worker.min.mjs",
     import.meta.url,
   ).toString();
   
   function AppProviders({ children, ...props }: PropsWithChildren<Omit<RPConfigProps, 'workerUrl'>>) {
       return (
         <RPConfig workerUrl={workerSrc} {...props}>
           {children}
         </RPConfig>
       )
   }
   
   export default AppProviders

Next.js (v14) — Webpack

Warning

@react-pdf-kit/viewer@^2.0.0 does not work with Next.js v14. We’re in the process of adding a support.

Currently, please use the NPM package of @react-pdf-kit/viewer@^2.0.0.

1. It’s important to complete Step 1 of pdfjs-dist installation before proceeding

2. Add configurations to next.config.js or next.config.ts:

   JSX

   next.config.js

   const path = require('path')
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // Config options here
     webpack: (config, { webpack }) => {
       config.plugins.push(
         new webpack.NormalModuleReplacementPlugin(/^pdfjs-dist$/, (resource) => {
           resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack')
         })
       )
       return config
     }
   }
   
   module.exports = nextConfig;

   TSX

   next.config.ts

   import { NextConfig } from "next";
   import path from 'path';
   
   const nextConfig: NextConfig = {
     /* config options here */
     webpack: (config, { webpack }) => {
       config.plugins.push(
         new webpack.NormalModuleReplacementPlugin(/^pdfjs-dist$/, (resource: any) => {
           resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack')
         })
       )
       return config
     }
   };
   
   export default nextConfig;

3. Add /pdf.worker.min.mjs to the workerUrl prop in the RPConfig component:

   JSX

   app/components/AppProviders.jsx

   import { RPConfig } from '@react-pdf-kit/viewer'
   import React from 'react'
   
   function AppProviders({ children, ...props }) {
       return (
         <RPConfig workerUrl='/pdf.worker.min.mjs' {...props}>
           {children}
         </RPConfig>
       )
   }
   
   export default AppProviders

   TSX

   app/components/AppProviders.tsx

   import { RPConfig, RPConfigProps } from '@react-pdf-kit/viewer'
   import React from 'react'
   import { type PropsWithChildren } from 'react'
   
   function AppProviders({ children, ...props }: PropsWithChildren<Omit<RPConfigProps, 'workerUrl'>>) {
       return (
         <RPConfig workerUrl='/pdf.worker.min.mjs' {...props}>
           {children}
         </RPConfig>
       )
   }
   
   export default AppProviders

TypeScript (Vite Only)

This section applies only if you are using Vite with TypeScript. The ?url import suffix used in the Vite configuration above may cause a TypeScript error.

For TypeScript, you may get an error Cannot find module 'pdfjs-dist/build/pdf.worker.min.mjs?url' or its corresponding type declarations. from import import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'.

To resolve this issue, you can add file .d.ts (e.g., global.d.ts) with the content below to your project

global.d.ts

declare module '*?url' {
  const content: string
  export default content
}