0

How do you load a static asset from node_modules in my case pdf.js (from the build folder of node_modules) so I don't have to set the version every time I update it.

I am migrating from Webpack to Vite, so this is how I use it in my webpack project currently.

<Worker workerUrl="/pdf.worker.bundle.js">

Webpack configuration

'pdf.worker': path.join(__dirname, '../node_modules/pdfjs-dist/build/pdf.worker.js'),

Looking for the Vite equivalent

My Vite configuration file is no different from the stock one.

Things I tried:

  • I looked at doing a service worker, but that seems more complex than what I'm looking for.
William Zink
  • 189
  • 4
  • 15
  • you don't, you bundle it in? Your code has an import (which node resolves from node_modules) and your bundler will take all the code you _actually_ use, and bundle it up into a single (or chunked) deliverable. The fact that there ever was a `node_modules` dir is 100% irrelevant. – Mike 'Pomax' Kamermans Mar 20 '22 at 23:34
  • I need to pass a URL for worker url in though, so how would I use an import here? – William Zink Mar 21 '22 at 01:29
  • Ah. If you need a worker, then you define a second webpack build for specifically creating your worker bundle with a different entry point and output filepath. (which you can either do in the same config file, or you can create a different config file and run that as part of building as well) – Mike 'Pomax' Kamermans Mar 21 '22 at 15:54

2 Answers2

1

You can import a script as a Web Worker by appending ?worker to the import path:

import PdfJsWorker from 'pdfjs-dist/build/pdf.worker.js?worker'
const worker = new PdfJsWorker()

No config is needed.

tony19
  • 125,647
  • 18
  • 229
  • 307
  • I tried ` {/* https://react-pdf-viewer.dev/examples/compile-and-set-the-worker-source-with-webpack/ */}
    ` but react is complaining about it not being a valid JSX element     – William Zink Mar 21 '22 at 12:40
  • Thanks, it worked for me! `import { Document, Page, DocumentProps, pdfjs } from 'react-pdf';` `import PdfJsWorker from 'pdfjs-dist/build/pdf.worker.js?worker';` `const pdfJsWorker = new PdfJsWorker();` `pdfjs.GlobalWorkerOptions.workerPort = pdfJsWorker;` – Oleksandr Danylchenko May 31 '22 at 07:14
  • Now the PDFs are displayed, but I'm getting another error in the console: `Cannot set properties of undefined (setting 'pdfjsWorker') at webpackUniversalModuleDefinition` – Oleksandr Danylchenko May 31 '22 at 07:42
0

If you need a URL rather than a worker, my solution was just to import the javascript file from node modules. Vite will handle this

import WorkerPdfJsUrl from 'pdfjs-dist/build/pdf.worker?url'

<Worker workerUrl={WorkerPdfJsUrl} >
  <div
    style={{
      height: '750px',
      width: '900px',
      marginLeft: 'auto',
      marginRight: 'auto',
    }}
  >
    <Viewer
      theme='light'
      fileUrl={pdfFile}
      plugins={[defaultLayoutPluginInstance]}
    />
  </div>
</Worker>
William Zink
  • 189
  • 4
  • 15