Canvg error: Cannot read properties of undefined (reading 'documentElement')

Question

For my application I am using Canvg (also jsPDF, but that's not relevant) and when I invoke the canvg() method it gives me this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'documentElement')

Here is my code:

        svgToPng(svg, callback){
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            let data = svg.outerHtml;
            canvg(canvas,data);
            callback(canvas)
        },

        download(){
            let el = d3.select('svg');
            this.svgToPng(el, function(canvas) {
                let img = canvas.toDataURL("image/png");
                let doc = new jsPDF('l', 'mm', [50, 120]);
                doc.addImage(img, 'PNG', 0, 0, 120, 50);
                doc.save('wordcloud.pdf')
            })
        }

Some extra info:

• I am loading Canvg in with a CDN

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js" crossorigin="anonymous"></script>

I have tried to do this with installing via NPM, but I got the same error.

Thanks in advance for helping!

Answer 1

I have found the answer to the issue. Apparently I was following an outdated tutorial and "data" was undefined.

All I did was remove the .outerHtml, and it works.

Thanks for looking