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

Activity

1. sakshamgoyal-01

   added

   enhancementNew feature or requestNew feature or request

   on Oct 28, 2026
2. alekswebnet commented on Oct 28, 2026

   

   alekswebnet

   on Oct 28, 2026

   Collaborator

   More actions

   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.
3. sakshamgoyal-01 commented on Oct 28, 2026

   

   sakshamgoyal-01

   on Oct 28, 2026

   Author

   More actions

   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?
4. alekswebnet commented on Oct 28, 2026

   

   alekswebnet

   on Oct 28, 2026

   Collaborator

   More actions

   No, it isn't tolerant. Pin the CDN to the exact version you have installed, and update both together.
5. alekswebnet commented on Nov 1, 2026

   

   alekswebnet

   on Nov 1, 2026

   Last edited by alekswebnet

   Collaborator

   More actions

   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
6. alekswebnet

   assigned

   sakshamgoyal-01

   on Nov 1, 2026
7. alekswebnet

   added

   documentationImprovements or additions to documentationImprovements or additions to documentation

   on Nov 1, 2026
8. missing-elements

   locked and limited conversation to collaborators on Nov 6, 2026
9. alekswebnet

   converted this issue into a discussion #75 on Nov 6, 2026