[Question]: How to make this work with Nextjs?

[sakshamgoyal-01]

Problem to solve

When using nextjs, most files work, but getting things like the jbig2.wasm working for some edge cases is a little tricky when using nextjs.

Is there a recommended path for setting this up for nextjs?

Proposed solution

when using nextjs / vite or any bundler in react, somehow load them from the bundle automatically

Alternatives considered

using a CDN like
https://cdn.jsdelivr.net/npm/@missing-elements/pdfjs-viewer/dist/wasm/jbig2.wasm

Additional context

No response

[alekswebnet]

Thanks for the report! Next.js bundles the viewer files but not the PDF.js data folders (wasm/, cmaps/, standard_fonts/…), so PDFs that need them, such as JBIG2 or JPEG 2000 scans and some CJK text, render with missing content. Bundlers can't pick these up automatically, because PDF.js loads them by name from a folder URL.

This setup works in production (next build + next start) with both Turbopack and webpack. Copy the package's dist into public/ on install:

"scripts": {
  "postinstall": "node -e \"require('fs').cpSync('node_modules/@missing-elements/pdfjs-viewer/dist', 'public/pdfjs-viewer', { recursive: true })\""
}

Run npm install once after adding the script (it runs on every install and npm ci from then on), and add public/pdfjs-viewer/ to .gitignore. Then point the element at the folder:

'use client'
import { useEffect } from 'react'

export function PdfViewer({ src }) {
  useEffect(() => {
    import('@missing-elements/pdfjs-viewer')
  }, [])
  return <pdfjs-viewer-element src={src} assets-base="/pdfjs-viewer/" style={{ height: '100dvh' }} />
}

With assets-base set, the element loads everything from that folder instead of the bundled copies, on any route. If your app has a basePath, prefix it: assets-base="/my-base/pdfjs-viewer/".

A CDN works too if you pin the exact package version, so the WASM matches the bundled PDF.js:
assets-base="https://cdn.jsdelivr.net/npm/@missing-elements/pdfjs-viewer@4.4.0/dist/".

Prefer assets-base over setting only wasm-url: on Next.js it also avoids two other problems we found while reproducing this (the PDF.js worker silently running on the main thread, and empty viewer stylesheets with next build --webpack). We're tracking those and a way to make bundled apps work without the copy step in #66.

[sakshamgoyal-01]

I'm going to use the CDN path so I don't need to set this up manually. Our CI blocks postinstall scripts.

What happens if I don't pin the CDN to a specific version? is it expected that it will break on any version change or is the wasm/js tolerant of version differences?

[alekswebnet]

No, it isn't tolerant. Pin the CDN to the exact version you have installed, and update both together.

[alekswebnet]

An update on the two Next.js problems I mentioned: #70 fixes the worker silently running on the main thread and the empty stylesheets with next build --webpack. Once it's released, Next.js works without assets-base for PDFs that don't need the data folders.

The data folders will still need a copy or a CDN. Loading them from the bundle automatically can't cover everything, because PDF.js loads the scripting sandbox, ICC profiles and annotation icons from folders, so I've dropped that idea (details in #66). Your pinned CDN assets-base keeps working as before. For apps that copy the folder instead, the docs will include a copy script. If CI skips install scripts, it can run from the build script instead of postinstall.

UPD: The fixes are released https://github.com/missing-elements/pdfjs-viewer/releases/tag/v4.4.2