kendo-angular-pdfviewer build error asking for pdfjs-dist

[Adrian]

I am having an issue with compiling angular (webpack) after adding @progress/kendo-angular-pdfviewer@14.3.0.  It is referencing pdfjs-dist in the error.  I do not see anywhere in the Getting Started > Dependencies about pdfjs-dist being needed.  The StackBlitz demo does not contain that library either.  When I try adding the pdfjs-dist module (either latest 4.0 or earlier 3.11), more errors occur related to pdfjs-dist.  My tsconfig.json compilerOptions has module=es2020 and target=es2022.  I do not have issues with any other @progress/kendo-angular-xxxxxx modules, and the @progress/kendo-license is included.  Here is the error without pdfjs-dist module installed:

ERROR in ./node_modules/@progress/kendo-angular-pdfviewer/fesm2020/progress-kendo-angular-pdfviewer.mjs 17:0-43
Module not found: Error: Can't resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
Did you mean 'pdf.worker.entry.js'?
BREAKING CHANGE: The request 'pdfjs-dist/build/pdf.worker.entry' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
  Parsed request is a module
  using description file: [path to project]\node_modules\@progress\kendo-angular-pdfviewer\package.json (relative path: ./fesm2020)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
 

[Adrian]

I was able to come up with a solution for this.  We are running on Angular 17.0.8 and the Progress Kendo Angular 14.3.0 components.  That should suffice as all components were working properly except for PDFViewer.  The same issue remained with trying Progress Kendo Angular 15.1.

Solution:

• npm install pdfjs-dist@3.11.174 (NOT version 4)
• npm install @progress/kendo-angular-pdfviewer@14.3.0
• EDIT: node_modules/@progress/kendo-angular-pdfviewer/fesm2020/progress-kendo-angular-pdfviewer.mjs

// Line 17 before:
import 'pdfjs-dist/build/pdf.worker.entry';
// After:
import 'pdfjs-dist/build/pdf.worker.entry.js';

[Martin Bechev]

Hi Adrian,

Thank you for the provided feedback.

We received a similar complaint a couple of months ago, and the solution was found by the client following this thread:

https://github.com/angular/angularfire/issues/3348#issuecomment-1536262612

I tried to install the PDFViewer in a newly created Angular 17 project, but the installation was successful, without the need to install any other packages additionally:

I am attaching the project for comparison and testing purposes. To run the app:

1. Download and unzip the folder.
2. Run npm install command.
3. Execute ng serve command.

While legacy-peer-deps something works and allows installing a certain package, such error messages and issues with installing anything else might appear as a side effect of the version mismatch.

I would suggest updating the Angular app to the latest versions as well as all Kendo packages (15.1.0) as this will ensure the correct setup of the app. Check out the version and installed packages in the attached app.

Regards,
Martin
Progress Telerik

[Sean]

Hi Martin,

NG SERVE works but NG BUILD is issuing a warning. Can you guy incorporate the ESM version?

▲ [WARNING] Module 'pdfjs-dist/build/pdf.worker.entry' used by 'node_modules/@progress/kendo-angular-pdfviewer/fesm2020/progress-kendo-angular-pdfviewer.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'pdfjs-dist' used by 'node_modules/@progress/kendo-pdfviewer-common/dist/es2015/utils.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

[Martin Bechev]

Hi Sean,

The warning messages indicate that the Angular app is using some dependencies that are not in ES Module (ESM) format but in CommonJS format.

What could be done to forcefully hide them when building the app is to allow CommonJS dependencies by configuring the Angular CLI to ignore these warnings. This is done in the angular.json file under the build options. 

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": [
              "pdfjs-dist",
              "@progress/kendo-angular-pdfviewer"
            ]
          }
        }
      }
    }
  }
}

Regards

 

 

 

[Sean]

Thanks Martin, that works for now - any ETA on an ESM version?

[Martin Bechev]

Hi Sean,

I will consult that matter with the development team and will write back tomorrow.

Regards,

Martin

[Martin Bechev]

Hi Sean,

There is no fixed timeframe for providing an ESM version.

Currently, the development team is performing tests on adopting the new major version 4 of the pdfjs (where one of the highlighted changes is the conversion to JavaScript modules):

https://github.com/mozilla/pdf.js/releases/tag/v4.0.189

In the meantime, the above-suggested approach is the way to go.

[Sean]

Thanks for looking into it for me, Martin.

I'll keep an eye on it for updates.