[SOLVED] Importing jsPDF causing optimization bailout warning in angular

Importing jsPDF causing optimization bailout warning in angular

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?

Solution

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