Unable to load dompourify dependency for html()

[sebbalex]

Hello, my issue is similar to #2846 I have an application created with create-react-app --template typescript

I use:

"react-app-rewired": "^2.1.6",
"jspdf": "^2.1.1"

My custom webpack configuration

module.exports = function override(config, env) {
  if (!config.externals) {
    config.externals = {};
  }
  config.externals = {
    ...config.externals,
    canvg: "canvg",
    html2canvas: "html2canvas",
    dompurify: "dompurify",
  };
  return config;
};

And code:

import { jsPDF } from "jspdf";
doc.html(<p>Hello world!</p>", {
  callback: function (doc) {
    doc.save('doc.pdf');
  }
});

And this is what I get:
Uncaught (in promise) Error: Could not load dompurify: Error: Could not load

They are both present in my node_modules folder.
PDF is generated but completely blank.
Thanks

[HackbrettXXX]

Well, if you define "dompurify" and "html2canvas" as external, they will not be included in the build and can therefore not be loaded. You should only define them as external if you are not using the html function.

[HackbrettXXX]

https://github.com/MrRio/jsPDF#optional-dependencies

If your application does not use any of the optional dependencies, you can prevent Webpack from generating the chunks by defining them as external dependencies:

[sebbalex]

ouch.. I misunderstood the point, now it's working, thank you @HackbrettXXX

[gupnee81]

ouch.. I misunderstood the point, now it's working, thank you @HackbrettXXX

Hi @sebbalex - I am facing the same issue and trying to use jspdf in the react project. Could you pls share the code snippet and webpack configs, so I can evaluate what I'm missing?

Also, When I switch to the latest version, I start getting this error -

jspdf.es.min.js:128 Uncaught (in promise) TypeError: _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default.a.convert is not a function
at new t (jspdf.es.min.js:128)

Can someone pls help me?

@HackbrettXXX

Here is a code snippet using latest version -

[HackbrettXXX]

@gupnee81 please provide a complete repro.

[pagegwood]

I had this same issue when using Laravel Mix. I fixed it by importing the missing deps directly like so:

import DOMPurify from "dompurify";

import html2canvas from 'html2canvas';

import { jsPDF } from "jspdf";

window.emailPdf = function () {

  return {

    domSelector: null,

    generatePdf() {

      var doc = new jsPDF();

      let $html = $(this.domSelector).html();

      doc.html($html, {
         callback: function (doc) {
           doc.save();
         }
      });
    },
  };
}

[Andre220]

i tried to put the dependencies of "html2Canvas" and "dompurify" on dependencies of the project on the github as follow:

"dependencies": {
    "@babel/runtime": "^7.14.0",    
    "atob": "^2.1.2",
    "btoa": "^1.2.1",
    "canvg": "^3.0.6",
    "core-js": "^3.6.0",
    "dompurify": "^2.4.0",
    "fflate": "^0.4.8",
    "html2canvas": "^1.4.1"
  },

On the "package.json" file, and run "npm run build" to generate the umd version of jsPDF to use in a angularJS project.

I trying to use it as follow:

function exportLogAsPDF = function ()
{
    var jsExporterToPDF = new jspdf.jsPDF();

        var toExport = "<p> Batata </p>";
        jsExporterToPDF.html(toExport, { 'width': 100, callback: function (jsExporterToPDF) { jsExporterToPDF.save("AA") }, });
}

but still receiving the message "Uncaught (in promise) Error: Could not load dompurify: Error: Could not load dompurify" on console.

The process of generate the umd file through the rollup is not able to export these two (html2Canvas,dompurify) libs?
There's some other process that i need to do after remove the reference of these libs from "optionalDependencies" and put them on "dependencies" ?