What should be the value for workerSrc?

[yinso]

Link to PDF file (or attach file here):

Configuration:

• Web browser and its version: Chrome 57.0.2987.133
• Operating system and its version: OSX 10.11.6
• PDF.js version: 1.7.365
• Is an extension: bundled via webpack 2.2.1

I tried to follow the documentation for webpack but it's not working (keep getting setting up fake worker), probably due to me not understanding what exactly should go into workerSrc.

Is workerSrc:

• a URL that'll get resolved by the browser? e.g. PDFJS.workerSrc = '/pdf.worker.js';
• a Node require spec that'll get resolved and bundled into the same file via webpack & node?
  e.g. PDFJS.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
• a relative path that'll get resolved and bundled into the same file via webpack & node?
  e.g. PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
• something else?

Thanks for any pointers.

[evadne]

@yinso should be something the browser can hit. You may not want to use a relative path since it may break if anything else in your stack makes asset digests. It is best if you render that from your web framework.

[timvandermeij]

Moreover, you can refer to the Webpack example at https://github.com/mozilla/pdf.js/tree/master/examples/webpack. Closing as answered.

[yinso]

Thanks guys for the help - appreciated.

[llamamoray]

I think @luistak solution should be added to the documentation. It's the cleanest way to load the worker in using webpack/create-react-app

[Mageenz]

It's the cleanest way to load the worker in using webpack/create-react-app

[gremo]

@luistak solution is good but still getting the error in console: Warning: Setting up fake worker.

Any help?

[luistak]

@luistak solution is good but still getting the error in console: Warning: Setting up fake worker.

Any help?

This was reported here and I don't really know much about pdf.js to fix 😞
I'm sorry

[Nataliasem]

I use Pdfjs v2.8.335 with legacy supporting in this way:

import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
import PDFJSWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry'

pdfjsLib.GlobalWorkerOptions.workerSrc = PDFJSWorker

[matheus-brisance]

I use Pdfjs v2.9.359 with legacy supporting in this way:

import * as PDFJS from 'pdfjs-dist/legacy/build/pdf';
import PDFJSWorker from 'worker-loader?esModule=false&filename=[name].[contenthash].js!pdfjs-dist/legacy/build/pdf.worker';

PDFJS.GlobalWorkerOptions.workerPort = new PDFJSWorker();

export default PDFJS;

[iamrmin]

has anyone faced error FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory when using

import { pdfjs } from 'react-pdf'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

react-scripts build and react-scripts start just crashes when error mentioned above. most importantly it only occur when i enable source map.

[Johnnybar]

Having the same issue as @iamrmin. The solution looks straightforward but crash follows...
Only way around it is to set worker this way:
pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/{installed_npm_version}/pdf.worker.js";
But seems counter-intuitive...

[iamrmin]

@Johnnybar Yes and I fixed it the same way 🤝

[Johnnybar]

Hi @iamrmin and whoever runs into this problem in the future. I managed to solve this issue by creating an .env file in the project's root where I deactivated building sourcemaps.
Here are links to 3 possible solutions:
https://stackoverflow.com/a/63745434
wojtekmaj/react-pdf#97 (comment)

[rajkp1997]

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
has anyone faced error FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory when using

import { pdfjs } from 'react-pdf'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
react-scripts build and react-scripts start just crashes when error mentioned above. most importantly it only occur when i enable source map.

[lamnouar]

You have the issue because you already have an instance for the pdfWorker created, I hade the same issue and I fixed it by adding this globalThis.pdfjsWorker = null; just before setting the workerSrc
Like this you will be able to create a new instance with your local file

[ar2pi]

If anyone reaches this point and uses this library in Node.js with Typescript, Serverless Framework and serverless-plugin-optimize here's what worked for me.

In your serverless.yml file:

provider:
  optimize:
    external:
      - pdfjs-dist/legacy/build/pdf.worker.js

In your code:

import * as pdfjs from 'pdfjs-dist/legacy/build/pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/legacy/build/pdf.worker';

[zhaoxu-lingoace]

Adding this to the entry file is automatically set workerSrc

import 'pdfjs-dist/webpack';

Official documentation

[xsh3byx]

me encontre con el mismo problema, y solucione asi:

import {getDocument, GlobalWorkerOptions, isPdfFile, version} from 'pdfjs-dist';
GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.js;

Espero que a alguien le sirva :)

[leungyauming]

For Vite users, you may try the following:

import * as pdfJS from "pdfjs-dist";
import pdfJSWorkerURL from "pdfjs-dist/build/pdf.worker?url";
pdfJS.GlobalWorkerOptions.workerSrc = pdfJSWorkerURL;

See: https://vitejs.dev/guide/assets.html#explicit-url-imports

[isacvale]

We're not allowed to rely on cloudfare's cdn, so we needed another approach.
I got this from react-pdf's README , and it worked ok.

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/legacy/build/pdf.worker.min.js',
  import.meta.url,
).toString();

[chtmiley]

Adding this to the entry file is automatically set workerSrc

import 'pdfjs-dist/webpack';

Official documentation

zhaoxu-lingoace's solution worked for me using webpack. I did it following the instructions on worker loading in timvandermeij's example: https://github.com/mozilla/pdf.js/tree/master/examples/webpack

Worker loading

If you are getting the Setting up fake worker warning, make sure you are importing pdfjs-dist/webpack.mjs which is the zero-configuration method for Webpack users. Installing worker-loader is no longer necessary.

import * as pdfjsLib from 'pdfjs-dist/webpack.mjs';

[ahmedelhaw]

import 'pdfjs-dist/webpack';

fantastic

[jigmeloday]

//cdnjs.cloudflare.com/ajax/libs/pdf.js/{installed_npm_version}/pdf.worker.js

pdf.mjs:12095
GET https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.worker.js net::ERR_ABORTED 404 (Not Found)

app-index.js:33 Warning: Error: Setting up fake worker failed: "Failed to fetch dynamically imported module: http://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.worker.js".


[jigmeloday]

We're not allowed to rely on cloudfare's cdn, so we needed another approach. I got this from react-pdf's README , and it worked ok.

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/legacy/build/pdf.worker.min.js',
  import.meta.url,
).toString();

getting 403

[techie014]

We're not allowed to rely on cloudfare's cdn, so we needed another approach. I got this from react-pdf's README , and it worked ok.

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/legacy/build/pdf.worker.min.js',
  import.meta.url,
).toString();

getting 403

@jigmeloday Could you please try this?

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url
).toString();

[OkanShr]

I haven't checked why yet but changing react-pdf version to: "react-pdf": "^8.0.2" fixed the 404 error that i previously had.
And im just using pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;
Works fine

Edit:
I checked react-pdf in npm and looks like they changed the url of the cdn.. so check the url based on your react-pdf version. https://www.npmjs.com/package/react-pdf

[anton-x-t]

See wojtekmaj/react-pdf#1377 (comment)