jsPDF 2.0.0 - Critical dependency: the request of a dependency is an expression

[RegniBlef]

Packages:
Node: 10.14.2
Angular: 10.0
jsPDF: 2.0.0

Problem:
I just updated jsPDF from 1.5.3 to 2.0.0 in my Angular 10.0 project and suddenly experience following warning during building:

WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:240-254
Critical dependency: the request of a dependency is an expression

Usage:

import { jsPDF } from "jspdf";
import html2canvas from 'html2canvas';

public savePDF(fileName: string) {

    /* tslint:disable */
    window['html2canvas'] = html2canvas;
    /* tslint:enable */

    const jspdf = new jsPDF({
      orientation: 'p',
      unit: 'pt',
      format: 'a4'
    });

    const canvas = this.canvas.nativeElement;

    try {
      jspdf.html(canvas, {
        html2canvas: {
          allowTaint: true,
          useCORS: true,
          scale: 600 / canvas.scrollWidth
        },
        callback: async (doc) => {
          doc.save(`${fileName}.pdf`);
          console.log('Success');
        }
      });
    } catch (error) {
      console.error(error);
    }
  }

[absoliman]

I can add that also we found the below lines.

[ng] WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:141-151
[ng] Critical dependency: the request of a dependency is an expression
[ng] WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:240-254
[ng] Critical dependency: the request of a dependency is an expression

[yuu2lee4]

+1

[sreeisalso]

browser logs

[HackbrettXXX]

Thanks for the elaborate issue report. The reason is probably how we load the optional libraries like html2canvas now. We should probably inline the code in loadOptionalLibrary so the import is no longer an expression.

If your code works, you can probably just ignore the warning for now. You might also try https://github.com/MrRio/jsPDF/issues/2839#issuecomment-673500637

[YaroslavAntipov]

+1

[egluhbegovic]

+1

[Ribeiro-Tiago]

If your code works (...)

@HackbrettXXX What if it doesn't ? 😛

My current issue is trying to make a PDF from HTML, and I'm getting errors from dompurify / html2canvas (tried both with HTML element and string).

Copied the example from the documentation, just changed the element:

import { jsPDF } from 'jspdf'

(...)

// triggered on button click
getPdf() { 
    const pdf = new jsPDF()

    pdf.html(document.getElementById('report'), {
      callback: function (doc) {
        doc.save()
      },
    })

    pdf.html(document.getElementById('report').innerHTML, {
      callback: function (doc) {
        doc.save()
      },
    })
}

Also tried using document.body (exactly as documentation) and

import * as jsPDF from 'jspdf'

const pdf = new jsPDF.jsPDF()

for testing sake, with no luck

I'm running
"vue": "^2.6",
"jspdf": "^2.0.0",
"dompurify": "^2.0.12",
"html2canvas": "^1.0.0-rc.7",
"core-js": "^3.0.0",

Could it be related to this issue ?

[HackbrettXXX]

@Ribeiro-Tiago I'm currently digging into that. Seems like build tools don't like expressions as imports. I hope I can publish a new release with a fix soon. As workaround you can try to include the UMD variant of jsPDF as script tag and ignore the warning.

[0x78f1935]

Same here

WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js
177:142-152 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jspdf/dist/jspdf.umd.min.js
 @ ./frontend/widgets/table.jsx
 @ ./frontend/views/retouren/bon-printer.jsx
 @ ./frontend/views/_backendGlue.jsx
 @ ./frontend/views/_routes.jsx

WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js
177:241-255 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jspdf/dist/jspdf.umd.min.js
 @ ./frontend/widgets/table.jsx
 @ ./frontend/views/retouren/bon-printer.jsx
 @ ./frontend/views/_backendGlue.jsx
 @ ./frontend/views/_routes.jsx

Code:

    generatePdf()
    {
        const input = document.getElementById(this.state.unique_id);  
        html2canvas(input)  
        .then((canvas) => {  
            var imgWidth = 210; 
            var pageHeight = 295;  
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;
            var position = 0;

            const imgData = canvas.toDataURL('image/png');  
            const pdf = new jsPDF('p', 'mm', 'a4')  

            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;

            while (heightLeft >= 0) {
                position = heightLeft - imgHeight;
                pdf.addPage();
                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
            }
            pdf.save(this.props.pdf_filename);
        });
    }

[Ribeiro-Tiago]

@HackbrettXXX my issue is not the warning per se, but the errors. Still happening with including as script tag. Could it be caused by some vue's webpack config ? Shall I open a new issue for this ?

[HackbrettXXX]

@Ribeiro-Tiago I'm pretty sure it's the same issue. I tested it yesterday with an Angular project. I got the warning and code that uses one of the optional libraries does not work. I'm pretty sure the warnings/errors are the same for Vue.

[Ribeiro-Tiago]

@HackbrettXXX oki, do you have an ETA on when you might have some time to release a fix ?

[HackbrettXXX]

I hope next week.

[yerycs]

Same warning. I am waiting next release. :)

[HackbrettXXX]

@RegniBlef could you check if the pull request #2865 really fixes the issue?

[Blunderchips]

Getting the same error on an Angular project with the following snippit:

const doc = new jsPDF();
doc.html('<html>Hello <b>world</b></html>');
doc.autoPrint();

Dependencies:

"core-js": "3.6.5",
"dompurify": "2.0.12",
"html2canvas": "1.0.0-rc.7",
"jspdf": "2.0.0",

Error message:

zone-evergreen.js:659 Unhandled Promise rejection: Could not load dompurify: Error: Cannot find module 'dompurify' ; Zone: <root> ; Task: Promise.then ; Value: Error: Could not load dompurify: Error: Cannot find module 'dompurify'
    at jspdf.umd.min.js:212
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569) Error: Could not load dompurify: Error: Cannot find module 'dompurify'
    at http://localhost:4200/vendor.js:132143:811
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:6463:30)
    at Zone.run (http://localhost:4200/polyfills.js:6222:47)
    at http://localhost:4200/polyfills.js:6956:40
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6498:35)
    at Zone.runTask (http://localhost:4200/polyfills.js:6266:51)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:6668:39)

[Ribeiro-Tiago]

Was going to try with the branch you mentioned earlier but saw that you just merged it to master so tried with master (cloned locally, ran npm run build moved /dist into my project's /node_modules/jspdf/dist), and it's working. Awesome job @HackbrettXXX

[HackbrettXXX]

Good to hear. Thanks.

I will prepare a new release next week.

[hugomejia]

Hi,

I don't if this is really relevent, but just for those who are struggling with this issue (because it blocks indeed the PDF generation), just install version jsPDF 1.5.3, works like a charm.

Just in case, I'm currently making PDFs in a VueJS app, using [email protected] and html2canvas 1.0.0-rc.7.

[RegniBlef]

@HackbrettXXX Also just tried it and found no initial problems. Thanks for the good work.

[e-hop]

jsPDF

working. install

npm i [email protected]

[HackbrettXXX]

@e-hop or npm i [email protected] ;)

[TomaszWaszczyk]

If using yarn you can pin jspdf version to ^2.1.0 in your project's package.json for temporary fix.

"resolutions": {
    "material-table/jspdf": "^2.1.0"
}

[petitmat]

That's a bit strange, I still have the issue after upgrading to 2.1.0, do you know why ?

Here is my code

let doc = new jsPDF("p", "pt", "a4")
doc.html("<div><h3>Test</h3></div>", {
    callback: function (d) {
        d.output("dataurlnewwindow")
    },
})

with my package.json

"dependecies: {
    "jspdf": "^2.1.0",
    "dompurify": "^2.0.12",
    "html2canvas": "^1.0.0-rc.7",
}

error:

Uncaught (in promise) Error: Could not load dompurify: ChunkLoadError: Loading chunk 1 failed.
    at eval (jspdf.es.min.js:6779)

[HackbrettXXX]

@petitmat Which framework build tool do you use? Is the dompurify chunk in the dist folder? Any warnings during the build? Is dompurify correctly installed (check the node_modules folder)?.

[petitmat]

@HackbrettXXX thank you for your answer
I'm using react with webpack. In fact dompurify is not in the dist folder (in node_modules/jspdf/dist). But I don't have warnings during the build, and dompurify correctly installed (I've made a fresh npm install after I removed manually jspdf, html2canvas and dompurify from node_modules).

[HackbrettXXX]

That's odd. Could you share a small repro project?

[staniszmatt]

Hope this will this will help, below resolved the issue during the build phase and dev:
I am using React-Electron boiler plate and in the configs/webpack.config.base.js file I added to externals:

```
externals: [
...Object.keys(externals || {}),
{ 'electron-debug': 'electron-debug' },
{ 'jspdf': 'jspdf' }
],
````

For both the electron warnings and the jspdf warnings appear to be resolved.

[HackbrettXXX]

@staniszmatt this looks like you're importing jsPDF "twice" - once as script tag (or similar, don't know how electron works in particular) and once with import statements. If that's the case you can get rid of the script tag and the externals declaration.