vue.js - import custom worker into component vuejs with webpack dev-server (vue-cli-service)

Question

In a vuejs application I need to read pdf file. I installed pdfjs-dist library. But this library need to custom path of an worker. This worker is brought by this library.

Now I have one component vuejs which contains an import for this library. And after resolving promise loading module to pdfjs-dist I set an option on this object.

But all tests failed

import("pdfjs-dist").then((pdfjsLib) => {
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '/node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")

Error is always the same and it says that :

Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".

Is this the path that generate error or the loading task path of webpack ?

How import worker of pdfjs into component vuejs into webpack dev-server env ?

question from:https://stackoverflow.com/questions/65929330/import-custom-worker-into-component-vuejs-with-webpack-dev-server-vue-cli-servi

Answer 1

I tried lot of things but it seems that webpack bring forth many others technicals concepts which increase difficult to understand and correctly import worker. Perhaps it exists other solution into webpack config file but I don't found.

For now the single solution have found is this :

• copy the worker module (pdfjs-dist) into the node_modules directory to the public directory of your app for respect structure directory
• declare path directly to this public directory and target your worker file (pdf.worker.js)

Those result this code line :

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js'