Importing jsPDF causing optimization bailout warning in angular

Question

I am quite new to Angular build and I am developing a feature where in I want to download/print the reports in PDF format. I installed the packages jsPDF and jsPDF-autotable using npm to convert the json data to pdf, but while serving the angular project with import in the component

import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';

It gives following warnings:

Warning: \node_modules\canvg\lib\index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.match.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.replace.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.promise.js'. CommonJS or AMD dependencies can cause optimization bailouts.    
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.starts-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reduce.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/web.dom-collections.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.ends-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.split.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.trim.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.index-of.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.includes.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reverse.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.regexp.to-string.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I went through many pages on web, but did not get the proper solution. Do not want to add the libraries in allowedCommonJsDependencies options in angular.json as it just suppresses the warning.

I am using angular build:

"@angular/cli": "^11.2.14",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28"

How should I solve this issue?

• Should I proceed with this warning and push the code to production? OR
• As I am not using addSvgAsImage function, I should move to custom-webpack build and move the libraries like canvg, raf to externals? OR
• Should I try using other library like pdfmake?

Answer 1

I was also facing the same problem, I fixed it by doing

"allowedCommonJsDependencies": [
          "jspdf-autotable",
          "raf",
          "core-js"
        ]

Update your angular.json with the following and you won't get those warnings, read more on Optimization bailouts official documentation

Answer 2

There is a solution for the transitive libraries which you don't use (s.b.).

Unfortunately jsPDF-AutoTable is only available in the CommonJS format and there seems to be no timetable for when it will be available as an ESModule (s. enter link description here).

Angular 11 production build warnings:

The issue is on canvg-side (or core-js), not on jsPDF side. Canvg is importing core-js, which has commonjs dependencies. If you don't use the addSvgAsImage function, you can mark canvg as external (see readme). See also #2976.

Btw, with Angular's new build system (based on ESBuild) you can simply add a property "externalDependencies" to your angular.json build configuration.

{ "projects": { "projectName": { "architect": {
 ...,
 "build": {
   ...,
   "configurations": {
     ...,
     "production": {
       ...,
       "externalDependencies": ["canvg", "dompurify", "html2canvas"]
     }
   }
 }
}}}}