Webpack should handle loading worker instead of setting workerSrc #10838
Comments
|
@MickL I'm facing the same. Did you find any workarounds? |
|
No I didnt find any. I used a second, precompiled, pdfjsWorker. So as far as I see the 1.5 MB worker gets loaded twice (bundled and loaded with webpack and loaded by pdf.js again but from different source). If i get this right, when using Webpack, pdf.js should not require a workerSrc and let the dependencies handle by Webpack. |
|
FWIW you can try importing |
|
Closing since we've changed the way we're working with Webpack to remove those dependencies from |
|
@timvandermeij would you mind clarifying how you are working with Webpack now? I looked around quite a bit but could not figure it out by myself. I got trapped in the error described in #10997, realized that my fully working app stopped working today because it was based on unstable sources, moved from links to an npm install of pdfjs-dist as advised there and tried to follow instructions here to adapt it to my use if Webpack, to no avail. The example provided is based on React, which I am not familiar with, nor using. My setup is:
As far as I understand, I need only to figure out how to import properly pdfjs and set the worker up, i.e. a couple of lines of code (see in code): Please let me know if you want me to open a new bug or if you can provide the required two lines of code, references or applicable examples in this thread. |
We tried to isolate the Webpack logic into this example so that it's self-contained and no other parts of PDF.js require its dependencies, also because we try to focus on the library itself and not on integration with the various JS frameworks. We're not familiar with them and in general can't answer questions about them; the examples are merely provided as a starting point. There is an additional example at https://github.com/yurydelendik/pdfjs-react/blob/4deabd1165395821acd4b6d3bc05dd6fef19b97f/src/App.js#L6 that seems to indicate that you're using it correctly. You should indeed also set the
It's not clear what is actually not working because no running example has been provided. This makes it not possible to know what's going on. |
|
Thanks a lot for your prompt answer @timvandermeij
Also the linked example is a React setup and I am not sure if/how this influences the results.
Let me try adding a few more info that might give hints, maybe the interpretation is obvious to you:
I looked at my node_modules directories, and: Warnings 1. and 2. -- 'FetchCompileAsyncWasmPlugin.js' is not in my node_modules/webpack/lib/web/ directory, although there's a 'FetchCompileWasmTemplatePlugin.js' One thing I asked myself is: is there a need to perform some post Thanks again |
The examples all set them, see https://github.com/mozilla/pdf.js/search?q=workerSrc&unscoped_q=workerSrc, even the Webpack example at https://github.com/mozilla/pdf.js/blob/50bc4a18e8c564753365d927d5ec6a6d2cce3072/examples/webpack/main.js, so I'm not sure why it was not found. Moreover, if I look at the error log, all errors seem to originate from somewhere inside Webpack and |
I suspect you are right. Let me try one more time to bother you, and in case it doesn't work I promise I'll stop. Looking at the Webpack example you linked, I found they instantiate the worker like this: I don't have the build/webpack dirs because I make Webpack compile directly in my Django directories (something that looks like and looking inside the compiled section that calls the Do you see a way I could amend the Anyway: thanks a million again for your answers and their speed, even on a Sunday. |
That path is indeed only valid for the example itself when the steps from the README at https://github.com/mozilla/pdf.js/blob/master/examples/webpack/README.md are followed. The If you use |
|
Fantastic, thank you. You found the same resource I had been reading in my searches. |
Hey Giampaolo, I'm also running into the same issue. I haven't been able to completely resolve the issue, but I was able to see that the worker-loader is trying to require the https://github.com/webpack-contrib/worker-loader/blob/master/src/index.js#L26 Seems like there may be some inconsistencies between Webpack 4 and 5? |
Oh great pick @edcheung1 . Do you think we should raise the issue with the Webpack team and maybe open an issue? |
|
I'm running into the same problem here. admittedly this is a super old project with a lot of out-of-date dependencies so maybe I'm missing something, but I can't get a newer version of pdfjs-dist to work where previously I had it working by importing 'pdfjs-dist/webpack'. now after updating pdfjs-dist, worker-loader and webpack, I am getting the following output: |
|
+1 FWIW facing the exact same error msgs mentioned above with a clean setup of create-react-app and using the App component from https://github.com/yurydelendik/pdfjs-react. |
|
We are also facing the exact same issue after upgrading the |
|
vue-cli4，same error |
|
I was able to solve the problem with the responses on Nevertheless, as i was still facing other issues using pdfjs with vue 3... To make it work i ended up using version 2.0.943 of the pdfjs-dist package. Not the best solution, but the only way i found to make it work after a week of trial and error... |
Currently facing the exact same issue. Did you find a fix? |
|
Same issue here, I followed all steps described in the sparse docs/examples and countless online blog post for old version and still no clear way to integrate pdfjs to a project. This post shows all the hoops one went through to make it work: https://stackoverflow.com/questions/63553008/looking-for-help-to-make-npm-pdfjs-dist-work-with-webpack-and-django Would really be nice if the dev experience was nicer, in the mean time will try to downgrade to 2.0.943 as the post above suggests ... |
|
Here's the fix copied from SO, posted by Siddhesh on 20th October:
It's easiest to downgrade worker-loader, as the pdfjs-dist containing the fix has not yet been released to npm. You can then import pdfjs-dist with: This works for me within a Vue.js component, in a project created by vue-cli. I'm using pdfjs-dist 2.5.207 and worker-loader 2.0.0. |
- Doesn't work with worker-loader 3.0.5. Had to downgrade to 2.0.0. - See mozilla/pdf.js#10838
|
Here is how I imported everything pdfjs and pdfjsworker import * as pdfjsLib from 'pdfjs-dist'; |
This finally worked for me after trying a lot. Thanks a lot. |
|
thanks @morgan4080 the solution works pretty well below is for someone who is looking for dynamic import import type PDFJS from 'pdfjs-dist';
let loader: Promise<typeof PDFJS>;
export default async function pdfjs() {
if (!loader) {
loader = new Promise((resolve, reject) => {
import('pdfjs-dist/webpack')
.then(() => import('pdfjs-dist/build/pdf').then(resolve))
.catch(reject);
});
}
return loader;
} |
|
Just leave the final solution here. |
When following the Webpack example and importing
pdfjs-distwithimport * as pdfjsLib from 'pdfjs-dist';Webpack will create apdfjsWorker.jsand also automatically load it in the browser. The file may be named differently(hashed names, prefixes, etc.)Still pdf.js requires to set a absolute path:
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjsWorker.js';This will let Webpack load the worker, and then pdf.js will also load the worker itself. Why is that the case? Instead we could just create a Worker and let Webpack do the loading?
Also i am having heavy trouble setting the workerSrc: The filename might be
pdfjsWorker.jsin development, but in production it has hashes and differential loading prefixes. I could use an external worker.js but then the worker(1.5mb) will be loaded twice and should not be included in Webpack bundling.The text was updated successfully, but these errors were encountered: