Overriding Dependency

@pdf-viewer/react@^1.0.0 requires pdfjs-dist as a peer dependency with a default version of 4.7.76. 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.7.76.

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.10.38).

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.js', to: 'pdf.worker.min.js' }
      ]
    })
    /// ...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,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, RPTheme, 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, RPTheme, 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

import type { NextConfig } from 'next'
import { webpack } from 'next/dist/compiled/webpack/webpack'
import path from 'path'

const nextConfig: NextConfig = {
  // Config options here
  webpack: (config) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /^pdfjs-dist$/,
        (resource: Record<string, string>) => {
          resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack')
        }
      )
    )
    return config
  }
}
export default nextConfig

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

JSX

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

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

TSX

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

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

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
}