Have a 504 error when getting pdf.worker.js using vite entry

[Gu-Miao]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I create a simple demo, but it can't work. I use pnpm, vite@4, typescript.

My code:

import { useState } from 'react'
import { Document, Page } from 'react-pdf/dist/esm/entry.vite'
import type { DocumentProps } from 'react-pdf'

function App() {
  const [numPages, setNumPages] = useState(0)
  const [pageNumber] = useState(1)

  const onDocumentLoadSuccess: DocumentProps['onLoadSuccess'] = ({ numPages }) => {
    setNumPages(numPages)
  }

  return (
    <div>
      <Document file="/test.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  )
}

export default App

I get a 504 error when getting the pdf.worker.js:

In the .vite dir, the bundle is:

I also tried this: #1148 (comment). But it's not good for me.

By the way, the entry path in README is outdate. It's not index.vite, it's entry.vite now.

Steps to reproduce

A minimal reproduction is here: https://github.com/Gu-Miao/react-pdf-test

Expected behavior

Demo works fun

Actual behavior

Get a 504 error when getting pdf.worker.js

Additional information

No response

Environment

• Browser (if applicable): Chrome 110
• React-PDF version: 6.2.2
• React version: 18.2.0
• Vite version: 4.1.4
• Pnpm version: 7.29.1

[itayper]

Having the same issue
Tried to lower version to 6.0.2 as to when it was solved.
#1148 (comment)

Couldn't get it to work.

[EdenTurgeman]

Tried using it with vite 4 and got the same error. 😞

[ChrisSamo632]

When I set an onLoadError event handler to display the error.message in a Vite setup (using the suggested entry.vite from the README.- note entry and not index.vite), I see the following returned:

Setting up fake worker failed: "Cannot load script at: http://localhost:3000/node_modules/.vite/deps/pdfjs-dist/build/pdf.worker.js".

Looking in the node_modules/.vite/deps directory, there indeed isn't a pdfjs-dist/ sub-directory (nevermind the rest). There is a node_modules/.vite/deps/react-pdf_dist_esm_entry__vite.js file (along with the same file with a .maps extension) - is this what should be referred to by react-pdf instead or is the required pdf.worker.js not being included in the .vite/deps as expected? In which case, where should it come from and how should it get here?

N.B. I've not included pdfjs-dist as an explicit dependency within package.json as react-pdf is using an old version (2.x rather than the current 3.x) and keeping the two inline could be challening in future.

[snimstice]

请问解决了吗？

[idaibin]

Don't use entry.vite, it works.

import { Document, Page } from 'react-pdf';
import * as pdfjs from 'pdfjs-dist/build/pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.js',
  import.meta.url
);

[wojtekmaj]

Indeed it appears that because of vitejs/vite#10839 Vite entry file does not behave correctly. If you guys have any idea how we could possibly implement this to make it work out of the box again, I'd be very grateful.

[ChrisSamo632]

Thanks @idaibin , while that didn't quite work for me it did lead me to implement one of the other pdf.worker.js setups from the README, like:

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

which works both when running in vite --mode localdev mode and also when transpiling with vite build then serving the JavaScript through nginx (the entry.vite approach from teh README works for the latter but not the former, which is frustrating if developing a TypeScript app with vite then deploying to an nginx or similar server)

I suspect that the import * as pdfjs from 'pdfjs-dist/build/pdf'; approach may require pdfjs-dist to be a dependency within the package.json (or using vite.config.js to put the file in the correct place for serving through the web server), but I'd rather avoid doing that so as not to keep that dependency inline with that of react-pdf (which is quite an old version now by the looks of it)

[Gu-Miao]

@idaibin thanks, it works for me.

First, my react-pdf's version is 6.2.2, so I need a pdfjs-dist@2.16.105 in my dependencies. You can check it in package.json of your react-pdf package in node_modules directory.

My final code using typescript:

import { useState } from 'react'
import { Document, Page } from 'react-pdf'
import * as pdfjs from 'pdfjs-dist'
import type { DocumentProps } from 'react-pdf'

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

[wojtekmaj]

@Gu-Miao your solution is now actually the recommended one in v7 😅 See README for details.

[xavier-villelegier]

@Gu-Miao did you manage to make it work without having to explicitly add pdfjs-dist as a deps? Having to keep it in sync with react-pdf's own pdfjs-dist version is not very convenient when using things like dependabot 😕

So far I've tried to add pdfjs-dist in the optimizeDeps.exclude Vite config, but no luck. I also didn't find any way to tell to the package.json to use the same version as react-pdf deps