[v6] "Could not read from file: /myrepo/node_modules/pdfjs-dist/build/pdf.worker.js?url" when using Vite specific entry

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

When I try to use the new react-pdf Vite entry, it causes an error which prevents the Vite server from responding whatsoever (✘ [ERROR] Could not read from file: /myrepo/node_modules/pdfjs-dist/build/pdf.worker.js?url). Perhaps this is related to which package manager is used, but I have only tried yarn classic.

A workaround that did the trick for me for now is to add pdfjs-dist to my dependencies directly, use the standard react-pdf import, and mimmic the Vite entrypoint’s import the pdf worker file, like:

import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker?url";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

The above works without issue. It seems Vite can only not resolve import pdfjsWorker from "pdfjs-dist/build/pdf.worker?url"; when that line appears within the react-pdf/dist/esm/entry.vite.js file itself. Would be great to avoid duplicating this logic/dependency myself if possible! Thanks for the great library and for adding Vite support directly!

Steps to reproduce

1. Use Vite
2. Add react-pdf v6
3. Add import { Document, Page } from "react-pdf/dist/esm/entry.vite"; to component file
4. Run Vite server and load page with component
5. See error in dev server terminal

Expected behavior

Successfully imports react-pdf and allows for usage

Actual behavior

Trying to import using the Vite entry causes the following error:

✘ [ERROR] Could not read from file: /myrepo/node_modules/pdfjs-dist/build/pdf.worker.js?url

    node_modules/react-pdf/dist/esm/entry.vite.js:3:24:
      3 │ import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?url';
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9:03:26 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/react-pdf/dist/esm/entry.vite.js:3:24: ERROR: Could not read from file: /myrepo/node_modules/pdfjs-dist/build/pdf.worker.js?url
    at failureErrorWithLog (/myrepo/node_modules/esbuild/lib/main.js:1566:15)
    at /myrepo/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (/myrepo/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (/myrepo/node_modules/esbuild/lib/main.js:1022:7)
    at /myrepo/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (/myrepo/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (/myrepo/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/myrepo/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Additional information

No response

Environment

• Browser (if applicable): n/a
• React-PDF version: 6.0.0
• React version: 17.0.2
• Vite version: 3.2.2
• @vitejs/plugin-react version: 2.2.0
• yarn version: 1.22.19 (yarn classic)

[wojtekmaj]

v6.0.1 released 😉

[wojtekmaj]

Damn, I’m puzzled.

It was working fine when react-pdf was part of the workspace, but indeed stopped working when I took the sample Vite repo out of the react-pdf workspace.

One thing I know is this has nothing to do with Yarn Classic, same can be reproduce in any other package manager.