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

If your project relies on a specific version of pdfjs-dist that differs from the default, you can override by adding an override in your package.json.

Install pdfjs-dist to Override

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

bun

  bun add pdfjs-dist

npm

  npm install pdfjs-dist --save

pnpm

  pnpm add pdfjs-dist

yarn

  yarn add pdfjs-dist

Based on the example above, installing without specifying a version will install the latest version of pdfjs-dist. To specify a version, you can add a suffix with pdfjs-dist@version (e.g.,npm install pdfjs-dist@4.7.76).

Using React with Webpack

1. 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

2. Add configurations to 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
  ]
}

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

JSX

import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'
import React from 'react'

export default function App() {
  return (
    <div>
      <RPConfig workerUrl={'/pdf.worker.min.mjs'}>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </div>
  )
}

TSX

import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'
import React from 'react'

export default function App() {
  return (
    <div>
      <RPConfig workerUrl={'/pdf.worker.min.mjs'}>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </div>
  )
}

Using React with Vite

1. Add configurations to vite.config.js or vite.config.ts

import { defineConfig } from 'vite'

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

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

JSX

import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'
import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'

function AppPdfViewer() {
  return (
    <RPConfig workerUrl={workerSrc}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}
export default AppPdfViewer

TSX

import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'
import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'

function AppPdfViewer() {
  return (
    <RPConfig workerUrl={workerSrc}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}
export default AppPdfViewer

Next.js

1. Add configurations to next.config.js or next.config.ts

JSX

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

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;

TypeScript

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
}