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

[sjdemartini]

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]

Out of curiosity, how does parcel2 entry works for you in Vite?

[sjdemartini]

Thanks for the quick reply! Neither of the parcel entries cause an error at the dev server level, but they don't properly load the worker file in the browser, since it seems they result in the wrong worker file path.

Trying the parcel2 entry gives the following in the browser console:

Uncaught DOMException: Failed to construct 'Worker': Script at 'http://localhost:9000/static/ui/node_modules/.vite/deps/pdf.worker.entry.js?type=module&worker_file' cannot be accessed from origin 'http://localhost:8000'.
    at http://localhost:9000/static/ui/node_modules/.vite/deps/react-pdf_dist_esm_entry__parcel2.js?v=687e0786:28:42

Trying the parcel entry gives the following in the browser console (seems it's trying to load pdf.worker.entry.js file relative to whatever page you're in in your browser, which isn't the right path):

Refused to execute script from 'http://localhost:8000/page-using-react-pdf/pdf.worker.entry.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
09:29:09.492 

[sjdemartini]

I'm sorry, it seems the particular error above with the parcel2 entry (which seems CORS related) only happens when I'm loading the Vite JS via a separate origin (current I'm embedding the Vite react app into a Django app following Vite's backend integration guide and using django-vite).

When I visit the Vite dev URL directly with the parcel2 entry, I instead get a 504 error in the browser trying to load the worker:

Request URL: http://localhost:9000/static/ui/node_modules/.vite/deps/pdf.worker.entry.js?type=module&worker_file
Request Method: GET
Status Code: 504 Gateway Timeout

So it seems that worker path isn't valid for loading via Vite somehow anyway (though was blocked outright when using a separate origin). I don't run into either of these sorts of problem with the workaround mentioned in my original bug report where I import the worker URL directly.

[elvis-tec]

Hello, I have the same issue; I added it like this:
import { Document, Page } from 'react-pdf/dist/esm/entry.vite';

And I receive the same 504 error.

Created with yarn create vite and yarn add react-pdf
React 18.2.0
react-pdf 6.0.0

[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.

[wojtekmaj]

v6.0.1 released ;)

[elvis-tec]

Working! thanks!

[wojtekmaj]

Thank you guys for the heads up!

[sjdemartini]

Thank you for the speedy fix! It loads now for me now, but I now get a console warning Warning: Setting up fake worker. from pdfjs. Is it expected that that should show up when using this Vite entry, and is there any way to work around it or resolve? I do not get that warning when using the original workaround above where I import the worker file directly, for what it's worth.

[wojtekmaj]

I still think the original solution should have worked, as I was unable to find anything about using ?url or ?worker in 3rd party modules being forbidden in Vite. I raised an issue here - vitejs/vite#10837 - I hope I will be able to get some help on it.

[sjdemartini]

Thanks for testing and documenting that issue for Vite so thoroughly, hope they're able to determine a fix!

[wojtekmaj]

OH MY GOD. It took me 4 hours to figure out that Vite is sensitive to extensions being added or not - the fix was to add .js to the worker URL 🤦

v6.0.2 released

I quit

[sjdemartini]

Haha funky bugs with Vite, thank you so much for your time and perseverance through all the Vite quirks! The 6.0.2 version works for me 🎉

---

I ran into one gotcha when I switched to the 6.0.2 Vite entry point though, documenting here in case it's useful to others. When I first switched to using import { Document, Page } from "react-pdf/dist/esm/entry.vite"; and not specifying the the worker URL or package dep myself, it loaded a worker js file successfully in the browser. However, the PDF wouldn't load and I got this error in the console:

Uncaught Error: Unknown action from worker: undefined
    at MessageHandler._onComObjOnMessage (message_handler.js:112:15)

Based on past react-pdf filed issues, it seems this occurs when the pdfjs-dist worker version is mismatched with the version react-pdf expects to be using. It turns out a separate old package I have in my dependencies had also specified an older version of pdfjs-dist in its deps, so two versions were getting installed for me (a newer one by react-pdf and an older one by this other old package). So I guess at least with yarn classic, the Vite entry isn't "specific" enough to indicate that its version of pdfjs-dist should be used (since I was no longer specifying a pdfjs-dist version in my package.json dependencies directly myself). To resolve this, I added a yarn resolution to ensure I only install a single version of pdfjs-dist:

  "resolutions": {
    "old-package-name/pdfjs-dist": "2.16.105"
  },

This triggers a warning during yarn install since that version conflicts with the pdfjs-dist version range that other package specifies, but I don't use the PDF functionality from it (and will probably remove the package entirely when I can, later), and I just want react-pdf to work cleanly here, so seems good enough.

[sjdemartini]

By coincidence, I'm currently attempting to migrate my project to pnpm, and the Vite entry file no longer works, as I get a 504 trying to load the PDF worker file:

display_utils.js:464          GET http://localhost:9000/static/ui/node_modules/.vite/deps/pdfjs-dist/build/pdf.worker.js net::ERR_ABORTED 504 (Gateway Timeout)

(For what it's worth, this happens even with a package.json resolutions override like I used with yarn above, which I added to ensure only a single version of pdfjs-dist is getting installed: "pdfjs-dist@1.8.357": "2.16.105".)

I found that this 504 error can be fixed by installing pdfjs-dist directly as a dependency (pnpm add pdfjs-dist@2.16.105). At that point though, perhaps it's cleaner to just use the original "workaround" as described in my original issue report though instead of the react-pdf Vite entry, since it sounds like Vite has some quirks with referencing a worker URL within the third-party dependency (as experienced here and based on the issues you filed with Vite, like vitejs/vite#10839 (comment)).