Using React-PDF with Webpack 5 and Yarn (Berry)

[wojtekmaj]

Has anyone solved this using Webpack 5 and Yarn (Berry)?

With the way yarn stores dependencies in zip files, none of these solutions make a lot of sense for me. Plus, I don't understand where the references to pdfjs-dist are coming from, as that is not react-pdf.

Even if i manually installed that dependency, the solutions I've seen would not work as the imports or references to things like whatever/dist/pdf.worker.js or whatever/build/pdf.worker.js simply don't work with the latest Yarn.

Am I missing something here? Why should I even be concerned about where this worker file lives?

Originally posted by @forgo in #97 (comment)

[wojtekmaj]

By itself, Yarn Berry shouldn't be a problem - you can always use nodeLinker: node-modules to make it completely backwards compatible. However, PnP creates issues with direct references to node_modules directory, because there isn't one.

The trick is to require.resolve pdfjs-dist's package.json - this will give us an easy access to pdfjs-dist virtual folder. This will also work with old node_modules system, so that's actually the recommended way.

So, instead of: node_modules/pdfjs-dist, use path.dirname(require.resolve('pdfjs-dist/package.json')).

pdf.worker.js

CopyWebpackPlugin

You can use CopyWebpackPlugin to copy pdf.worker.js. However, CopyWebpackPlugin will not accept 'node_modules/build/pdf.worker.js' path to copy worker.

To fix that:

• Add direct dependency on pdfjs-dist to your project, and make sure to keep it 100% in line with what's used by your React-PDF version
• Replace 'node_modules/pdfjs-dist/build/pdf.worker.js' with path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'build', 'pdf.worker.js')

Manual copy

To manually copy pdf.worker.js:

• Add direct dependency on pdfjs-dist to your project, and make sure to keep it 100% in line with what's used by your React-PDF version

• Use a custom script, for example:

  import path from 'path';
  import fs from 'fs';
  
  const pdfWorkerPath = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'build', 'pdf.worker.js');
  
  fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js');

Note: README has been updated to include that.

cMaps

CopyWebpackPlugin will not accept 'node_modules/pdfjs-dist/cmaps' path to copy cMaps.

To fix that:

• Add direct dependency on pdfjs-dist to your project, and make sure to keep it 100% in line with what's used by your React-PDF version
• Replace 'node_modules/pdfjs-dist/cmaps' with path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps')

Note: README has been updated to reflect that.