Warning: Setting up fake worker. How to render PDF from ArrayBuffer using react-pdf in Next.js app?

[lancejpollard]

I am getting these error messages in the chrome dev tools logs, when rendering the PDF <Document> in my simple Next.js app:

Warning: Setting up fake worker.
pdf.js:5521 Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.
       GET http://localhost:3000/_next/static/chunks/app/generate/latex/equation/page.worker.js net::ERR_ABORTED 404 (Not Found)
eval @ pdf.js:5517
loadScript @ pdf.js:5505
loader @ pdf.js:1982
get _setupFakeWorkerGlobal @ pdf.js:1985
_setupFakeWorker @ pdf.js:1907
...
tiny-warning.esm.js:12 Warning: Error: Setting up fake worker failed: "Cannot load script at: http://localhost:3000/_next/static/chunks/app/generate/latex/equation/page.worker.js".

It looks like I need to setup the worker somehow? Did I miss that in the docs (looks like so)? I am successfully receiving an ArrayBuffer after doing fetch(apiPath) to generate a PDF from LaTeX using the pdflatex CLI (and I have verified the PDF is renderable by checking the PDF manually), but it's not working. Here is my UI code:

'use client'

import React, {
  useState,
} from 'react'
import { Document } from 'react-pdf'
import _ from 'lodash'

const TEMPLATE = (code: string) => `\\documentclass{article}
\\usepackage{geometry}
\\geometry{a4paper,total={6in, 8in},margin=0pt}
\\begin{document}

${code}

\\end{document}`

export default function View() {
  const [pdf, setPDF] = useState<Uint8Array>()
  const [pdfError, setPDFError] = useState<string>()

  const handleChange = _.debounce(async (event: ChangeEvent) => {
    console.log('debounced')

    const code = (event.target as HTMLTextAreaElement).value
    const res = await fetch('/base/generate/latex/pdf', {
      method: 'POST',
      body: JSON.stringify({ code: TEMPLATE(code) }),
      headers: {
        'content-type': 'application/json',
      },
    })

    if (res.status >= 400) {
      const json = await res.json()
      setPDFError(json.text as string)
    } else {
      const buffer = new Uint8Array(await res.arrayBuffer())
      setPDFError(undefined)
      setPDF(buffer)
    }
  }, 1000)

  return (
    <div className="px-16 flex w-full flex-col gap-16">
      <textarea onChange={handleChange} />
      <div className="w-full whitespace-pre">
        {pdf ? <Document file={{ data: pdf }} /> : pdfError}
      </div>
    </div>
  )
}

And here is my API route to generate the PDF, if that helps:

import { NextResponse } from 'next/server'
import { generateLatexPDF } from '~/utilities/latex'

export async function POST(request: Request) {
  const json = await request.json()

  if (typeof json.code === 'string') {
    try {
      const buffer = await generateLatexPDF(json.code as string)

      return new NextResponse(buffer, {
        status: 200,
        headers: new Headers({
          'content-disposition': `attachment; filename="preview.pdf"`,
          'content-type': 'application/pdf',
          'content-length': String(buffer.byteLength),
        }),
      })
    } catch (e) {
      if (e instanceof Error) {
        if (e.cause === 'latex') {
          return NextResponse.json(
            { type: 'error', message: e.message },
            {
              status: 400,
            },
          )
        }
      }
      return NextResponse.json(
        { type: 'error', message: 'System error' },
        {
          status: 400,
        },
      )
    }
  } else {
    return NextResponse.json(
      { type: 'error', message: 'System error' },
      {
        status: 400,
      },
    )
  }
}

And the utility:

import child_process from 'child_process'
import { promises as fs } from 'fs'
import tmp from 'tmp'

export async function generateLatexPDF(
  code: string,
): Promise<Uint8Array> {
  const tmpFileName = tmp.tmpNameSync()
  const tmpDirectory = tmp.dirSync()
  const inputPath = `${tmpFileName}.tex`
  const outputPath = `${tmpDirectory.name}/preview.pdf`
  await fs.writeFile(inputPath, code)

  return new Promise((res, rej) => {
    child_process.exec(
      `pdflatex -interaction=nonstopmode -halt-on-error -output-directory ${tmpDirectory.name} -jobname=preview ${inputPath}`,
      async (err, stdout) => {
        if (err) {
          return rej(new Error(stdout))
        }

        const out = await fs.readFile(outputPath)

        // debugging to check if PDF is renderable
        console.log(outputPath)

        // cleanup
        for (const file of await fs.readdir(tmpDirectory.name)) {
          await fs.unlink(path.join(tmpDirectory.name, file))
        }
        tmpDirectory.removeCallback()

        res(out)
      },
    )
  })
}

Any suggestions or ideas on why my PDF is not rendering now, and just saying this where the <Document /> was rendered?

Failed to load PDF file.

[lancejpollard]

Getting this after adding what the README suggested for the worker (and adding an .npmrc):

./utilities/client/pdf.ts:4:38
Module not found: Can't resolve 'pdfjs-dist/build/pdf.worker.min.js'
  2 | import { pdfjs } from 'react-pdf'
  3 |
> 4 | pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    |                                      ^
  5 |   'pdfjs-dist/build/pdf.worker.min.js',
  6 |   import.meta.url,
  7 | ).toString()

[lancejpollard]

I tried the copy "worker.min.js" to the public folder, but my node_modules/pdfjs-dist/build folder only has .mjs files, so I tried this:

import path from 'node:path'
import fs from 'node:fs'

const pdfjsDistPath = path.dirname(
  require.resolve('pdfjs-dist/package.json'),
)
const pdfWorkerPath = path.join(
  pdfjsDistPath,
  'build',
  'pdf.worker.min.mjs',
)

fs.copyFileSync(pdfWorkerPath, './public/pdf.worker.js')

However, then in the browser I get:

Warning: Setting up fake worker.
pdf.worker.js:21 Uncaught SyntaxError: Unexpected token 'export' (at pdf.worker.js:21:1028280)
tiny-warning.esm.js:12 Warning: Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler')".

So I need to perhaps compile it? What should I do now?

[lancejpollard]

Ok got some errors to go away. Had manually done pnpm add pdfjs-dist, which installed version 4, but react-pdf uses version 3. Now this seems to work only letting react-pdf install its own version of pdfjs-dist:

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString()

BTW any notes on when it will be updated to the latest version of pdfjs-dist?

[JamesSingleton]

Yea I am getting this same issue right now. My guess is it's something that Next.js did...

[eugeneH1]

I had a similar issue. Fix for me was using Next 13 instead of 14.