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 [email protected] 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

[athenacfr]

pdfjs-dist

@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

If you're using vite you can import the worker url (no need to add it as a dependency, since react-pdf already has it as its dependency).

This solution is actually the same shown in documentation, the only difference is that vite will handle getting the right url path, which may be is necessary to work in different environments.

import { pdfjs } from 'react-pdf'
import pdfWorkerURL from 'pdfjs-dist/build/pdf.worker.min?url'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(pdfWorkerURL, import.meta.url).toString()

[yaswanthmaddula-sureify]

pdfjs-dist

@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

If you're using vite you can import the worker url (no need to add it as a dependency, since react-pdf already has it as its dependency).

This solution is actually the same shown in documentation, the only difference is that vite will handle getting the right url path, which may be is necessary to work in different environments.

import { pdfjs } from 'react-pdf'
import pdfWorkerURL from 'pdfjs-dist/build/pdf.worker.min?url'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(pdfWorkerURL, import.meta.url).toString()

This is working fine in dev mode but in the build preview using vite, its not. Any idea on that ? @athenacfr

[anton-x-t]

This worked for me (React/Vite):

import { pdfjs } from "react-pdf";
import pdfWorker from "pdfjs-dist/build/pdf.worker.min.mjs?worker";
pdfjs.GlobalWorkerOptions.workerPort = new pdfWorker();

Sources:
What should be the value for workerSrc? 8305,
thank you Leung Yau Ming,
mozilla/pdf.js#8305 (comment)

Importing Script as a Worker, vite.dev,
thank you helloworld3200 et al,
https://vite.dev/guide/assets.html#importing-script-as-a-worker

Have a 504 error when getting pdf.worker.js using vite entry 1377,
thank you Athena Freitas,
#1377 (comment)

[anderskleve]

Still having trouble getting this worker script loading properly in my React app, using Vite.

Using the recommended import solution for the worker, and also trying the solution that @anton-x-t suggested, resulted in this error:

Vite: 4.5.5
react-pdf: 9.1.1

Only solution that works for me is grabbing the worker from a CDN, which I guess is fine for now.

[athenacfr]

Still having trouble getting this worker script loading properly in my React app, using Vite.

Using the recommended import solution for the worker, and also trying the solution that @anton-x-t suggested, resulted in this error:

Vite: 4.5.5
react-pdf: 9.1.1

Only solution that works for me is grabbing the worker from a CDN, which I guess is fine for now.

It seems your server is not handling mjs/cjs a extensions properly, I had the same problem. If you use nginx you this should work:

types {
  # Extend application/javascript mime to include cjs and mjs
  application/javascript js cjs mjs;
}

[andretti1977]

Still having trouble getting this worker script loading properly in my React app, using Vite.
Using the recommended import solution for the worker, and also trying the solution that @anton-x-t suggested, resulted in this error:

Vite: 4.5.5
react-pdf: 9.1.1
Only solution that works for me is grabbing the worker from a CDN, which I guess is fine for now.

It seems your server is not handling mjs/cjs a extensions properly, I had the same problem. If you use nginx you this should work:

types {
  # Extend application/javascript mime to include cjs and mjs
  application/javascript js cjs mjs;
}

OH MY GOD!!!

Thank you so much! I've tried all the possible solutions listed in this and related threads and this was the solution!!!

I'm using react-pdf 9.1.1 and vite 6.0.2 and using the documented approach everything worked well when developing but breaks when building and deploying it via docker on an nginx server with the same problem relative to handling mjs as octect-stream.
Had to create and copy over nginx a new mime.types file with the extended mime.type.

For other people reference:

PDFPage.jsx

//as documented on react-pdf documentation:
import {Page, Document, pdfjs} from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();
...
...

Dockerfile

FROM nginx:1.27.3-alpine AS prod
COPY ./dist /usr/share/nginx/html
COPY nginx.conf  /etc/nginx/conf.d/default.conf
COPY mime.types  /etc/nginx/mime.types
EXPOSE 3100

mime.types

types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js cjs mjs;
    application/atom+xml                             atom;
    application/rss+xml                              rss;
    ...
    ...