Worker Script Failing to Load for Vue Webpack Built App Worker Script Failing to Load for Vue Webpack Built App vue.js vue.js

Worker Script Failing to Load for Vue Webpack Built App


My guess on the problem is that pdfjs requires the workerSrc property to be known in runtime. But when you use webpack it will probably assign an unguessable hash on the file name, so you can't really put the filename as a string in your code.

But pdfjs provides a solution for us! They have included a webpack file in their distribution.

In your code

var pdfjs = require("pdfjs-dist/webpack");//we dont't include the normal module//but the one with the webpack configuration//that the pdfjs team provides us.//no need to disable worker//or point to the workerSrc

So what this thing does

//inside "pdfjs-dist/webpack"'use strict';var pdfjs = require('./build/pdf.js');var PdfjsWorker = require('worker-loader!./build/pdf.worker.js');if (typeof window !== 'undefined' && 'Worker' in window) {  pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();}module.exports = pdfjs;

Basically it includes the original build from ./build/pdf.js and it will also import for us the worker script with the worker-loader. A webpack loader designed to import web-workers in our apps. Then it assigns the actual worker in the pdfjs instance and it exports it.

After you import the above file in your app you will have a pdfjs instance configured with a web-worker ready for your bundle!