Need assistance integrating pdfjs-dist with Webpack in Django project

Other Questions NPM
1

I’m having trouble setting up pdfjs-dist with Webpack in my Django project. I switched from link-based pdf.js to npm’s pdfjs-dist for better stability. But I’m stuck with compilation errors.

Here’s what I’m seeing:

WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileAsyncWasmPlugin' in '/path/to/node_modules/worker-loader/dist'
// ... more errors ...

I thought pdfjs-dist was supposed to work out of the box without extra config. This code should work, but it’s not compiling:

import pdfViewer from 'pdfjs-dist/webpack'

export const showPdf = () => {
  const pdfLoader = pdfViewer.getDocument(pdfInfo.sourcePdf)

  pdfInfo.currentPdf = pdfLoader.promise.then(doc => {
    pdfInfo.pageCount = doc.numPages;
    return doc;
  })
}

Any ideas on how to fix this? I’ve been at it for hours and could really use some help. Thanks!

2

I encountered a similar issue when integrating pdfjs-dist with Webpack in a Django project. One solution that worked for me was updating the import statement. Instead of importing from ‘pdfjs-dist/webpack’, try importing directly from ‘pdfjs-dist’:

import * as pdfjsLib from 'pdfjs-dist';

Then, set the worker source:

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.min.js';

This approach bypasses some of the Webpack-specific issues. Also, ensure you’re using compatible versions of pdfjs-dist, Webpack, and worker-loader. Upgrading to the latest stable versions of each might resolve compatibility conflicts.

If issues persist, consider adding a resolve alias in your Webpack config:

resolve: {
  alias: {
    'pdfjs-dist': path.join(__dirname, 'node_modules/pdfjs-dist/build/pdf.js')
  }
}

This explicitly points Webpack to the correct file, potentially resolving path-related errors.

3

hey jack, ive had that prob too. it sucks. try updating ur webpack config like this:

module.exports = {
// other stuff
resolve: {
fallback: {
fs: false,
stream: require.resolve(‘stream-browserify’)
}
}
}

that fixed it 4 me. goodluck mate!

4

I’ve faced a similar issue before when integrating pdfjs-dist within a Django project using Webpack. In my experience, the problem often boils down to a version mismatch between Webpack and worker-loader. One thing to verify is that your Webpack version is compatible with the worker-loader version you’re using—Webpack 5.x tends to work best with the latest compatible worker-loader.

I also had success by explicitly configuring Webpack to handle Web Workers. For instance, adding the following to your config:

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /pdf\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

This configuration directs Webpack on how to manage the PDF.js worker file. Additionally, I found that importing directly from ‘pdfjs-dist’ rather than ‘pdfjs-dist/webpack’ avoided some compilation issues.

Hope this helps resolve your errors.