I've been trying for a few hours replacing a link-based pdf.js with an npm install of pdfjs-dist, since I noticed that my links were not meant to be used as cdns and could become unstable as described here.
I could not find much documentation on how to make that work other than a few examples, and when Webpack is involved they are mostly with React, while I am simply using ES6 in a Django framework (static compiling on the desired django directory, without using the webpack-plugin.)
After exchanging several messages with one of the guys that work on pdf.js it seemed that my compiling errors were probably due to how Webpack handles internally the library. Here's what I am seeing:
WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileAsyncWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
@ ./node_modules/worker-loader/dist/index.js
@ ./node_modules/worker-loader/dist/cjs.js
@ ./node_modules/pdfjs-dist/webpack.js
@ ./src/js/views/pdfViews.js
@ ./src/js/index.js
WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
@ ./node_modules/worker-loader/dist/index.js
@ ./node_modules/worker-loader/dist/cjs.js
@ ./node_modules/pdfjs-dist/webpack.js
@ ./src/js/views/pdfViews.js
@ ./src/js/index.js
ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'
@ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
@ ./node_modules/worker-loader/dist/index.js
@ ./node_modules/worker-loader/dist/cjs.js
@ ./node_modules/pdfjs-dist/webpack.js
@ ./src/js/views/pdfViews.js
@ ./src/js/index.js
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./src/src-select.html] 4.57 KiB {HtmlWebpackPlugin_0} [built]
Child worker-loader node_modules/pdfjs-dist/build/pdf.worker.js:
Asset Size Chunks Chunk Names
index.worker.js 1.33 MiB pdf.worker [emitted] pdf.worker
Entrypoint pdf.worker = index.worker.js
[./node_modules/pdfjs-dist/build/pdf.worker.js] 1.25 MiB {pdf.worker} [built]
[./node_modules/process/browser.js] 5.29 KiB {pdf.worker} [built]
ℹ ｢wdm｣: Failed to compile.
Theoretically the pdfjs-dist should come with a zero configuration file, without even needing to set up a worker for it, so code like the one below should work:
import pdfjsLib from 'pdfjs-dist/webpack'
////////////////////////////////////////////
//// instantiate pdf
export const pdfView = () => {
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'index.worker.js';
// var defined through a Django template tag
const loadingTask = pdfjsLib.getDocument(pdfData.myPdfDoc)
pdfData.myPdf = loadingTask.promise.then(pdf => {
pdfData.pdfTotalPageN = pdf.numPages;
return pdf;
})
}
but it doesn't get compiled, and I would really appreciate some pointers. Thanks in advance
If you're fine with using a cdn then use this
import pdfJS from 'pdfjs-dist/build/pdf.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
Make sure to import minified versions on production
import pdfJS from 'pdfjs-dist/build/pdf.min.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js';
Or you can just use minified versions all the time
This issue seems to arise due to esModule option introduced in worker-loader@3.0.0.
The fix for this was merged in (pre-release) pdjs-dist@2.6.347
You can fix this by either upgrading pdfjs-dist to v2.6.347 OR downgrading worker-loader to v2.0.0
if webpack is failing because of optional chaining consider pointing to the legacy version which omits modern syntax.
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.js'
instead of
import * as pdfjs from 'pdfjs-dist'
Go to
node_modules/pdfsj-dist/package.json
In
"peerDependencies": {
"worker-loader": "^3.0.8" -> Version
},
Install version
npm i worker-loader@3.0.8
It worked with:
var pdflib = require('pdfjs-dist/build/pdf.js');
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.js';
pdflib.GlobalWorkerOptions.workerPort = new pdfjsWorker();