Unable to load dompourify dependency for html()

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

Issue Analytics

State:
Created 3 years ago
Comments:7

Top GitHub Comments

2reactions

pagegwoodcommented, Dec 7, 2021

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();
         }
      });
    },
  };
}

0reactions

Andre220commented, Oct 19, 2022

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” ?

Top Results From Across the Web

Unable to load dompourify dependency for html() · Issue #2991

i tried to put the dependencies of "html2Canvas" and "dompurify" on dependencies of the project on the github as follow: "dependencies": { "@babel/runtime":...

How to install, import and use DOMPurify in frontend js file?

For React: import DOMPurify from "dompurify"; <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirtyContent) }} />.

dompurify - npm

DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all ...

Third Party Library DOMPurify on lwc - Failed to execute ...

I'm trying to load DOMPurify in lwc in order to sanitize some data, but I cannot find a way to make the library...

Content Security Policy (CSP) - AppSec Monkey

Allowing users to upload HTML/SVG files and serving those back unsafely. Allowing users to set the HREF attributes of links.