Using dom-to-image in an ionic react app (typescript) - "Uncaught TypeError: Cannot read properties of undefined (reading 'toPng')"

Question

I receive the error in the title when calling the following function in my app.

  let container = this.myRef.current!;

  DomToImage.toPng(container)
    .then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    })
    .catch(function (error) {
      console.error("something went wrong!", error);
    });
}

I installed the library with

npm install dom-to-image

and then ran the following to add the types necessary for using the library with typescript

npm i --save-dev @types/dom-to-image-more

The console.log of container correctly outputs the HTML I expect.

No errors show in VSCode and intellisense can find the interface for DomToImage and toPng

  toSvg(node: Node, options?: Options): Promise<string>;
  toPng(node: Node, options?: Options): Promise<string>;
  toJpeg(node: Node, options?: Options): Promise<string>;
  toBlob(node: Node, options?: Options): Promise<Blob>;
  toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>;
}

Here is the full error if that is helpful

Summary.tsx:345 Uncaught TypeError: Cannot read properties of undefined (reading 'toPng')
    at Summary.exportToPng (Summary.tsx:345:1)
    at onClick (Summary.tsx:617:1)
    at newProps.onClick (createComponent.tsx:96:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1)
    at executeDispatch (react-dom.development.js:389:1)
    at executeDispatchesInOrder (react-dom.development.js:414:1)
    at executeDispatchesAndRelease (react-dom.development.js:3278:1)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1)
    at forEachAccumulated (react-dom.development.js:3259:1)
    at runEventsInBatch (react-dom.development.js:3304:1)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1)
    at handleTopLevel (react-dom.development.js:3558:1)
    at batchedEventUpdates$1 (react-dom.development.js:21871:1)
    at batchedEventUpdates (react-dom.development.js:795:1)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1)
    at attemptToDispatchEvent (react-dom.development.js:4267:1)
    at dispatchEvent (react-dom.development.js:4189:1)
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at discreteUpdates$1 (react-dom.development.js:21887:1)
    at discreteUpdates (react-dom.development.js:806:1)
    at dispatchDiscreteEvent (react-dom.development.js:4168:1)

Any idea where I am going wrong? I don't understand how 'ToPng' can be undefined. Thank you!

score 0 · Answer 1 · answered Mar 15 '22 at 05:07

I am using Ionic with Angular.

I import domToImage:

import domToImage from 'dom-to-image-improved';

Then instatiate it in the method:

const domToImageOptions = { bgcolor: 'white', height: this.heightOfDom + 10, width: this.widthOfDom + 10 };

const result = await domToImage.toPng(this.printableArea, domToImageOptions);

The result is a base64 image

Using dom-to-image in an ionic react app (typescript) - "Uncaught TypeError: Cannot read properties of undefined (reading 'toPng')"

1 Answers1