Error: Unable to find node on an unmounted component.

[mattu36]

"react": "^17.0.1",
"react-router-dom": "^5.2.0"

import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip as Rtooltip, XAxis, YAxis } from 'recharts'
import { getPngData } from "recharts-to-png";

<BarChart ref={ref => (this.chart = ref)} width={600} height={300} data={...} margin={{ top: 0, right: 30, left: 20, bottom: 40 }}>
  <CartesianGrid vertical={false} strokeDasharray='3 3' />
  <XAxis dataKey='name' />
  <YAxis />
  <Rtooltip content={...} />
  <Legend formatter={...} />
  <Bar
  ...
  />
  <Bar
  ...
/>

handleDownload = async () => {
console.log("this.chart",this.chart)

const pngData = await getPngData(this.chart);

react-dom.development.js:24281 Uncaught (in promise) Error: Unable to find node on an unmounted component.
    at findHostInstanceWithWarning (react-dom.development.js:24281)
    at Object.findDOMNode (react-dom.development.js:24804)
    at index.js:55
    at step (index.js:33)
    at Object.next (index.js:14)
    at index.js:8
    at new Promise (<anonymous>)
    at push../node_modules/recharts-to-png/dist/index.js.__awaiter (index.js:4)
    at getPngData (index.js:50)
    at _callee$ (Meterreading.js:55)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (99.fff86d3a9731a0734d1d.hot-update.js:41)
    at _next (99.fff86d3a9731a0734d1d.hot-update.js:43)
    at 99.fff86d3a9731a0734d1d.hot-update.js:43
    at new Promise (<anonymous>)
    at Object.onClick (99.fff86d3a9731a0734d1d.hot-update.js:43)
    at index.js:1
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at HTMLUnknownElement.sentryWrapped (helpers.js:72)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
    at HTMLDivElement.sentryWrapped (helpers.js:72)

[mattu36]

if (this.chart && this.chart.container) {
      svg = this.chart.container.children[0];
      console.log("svg",svg)
    }
    const pngData = await getPngData(svg);

Now work. I can't set only ref.

And width/height can take from props.

width = this.chart?.props?.width || 900
height = this.chart?.props?.height || 300

[brammitch]

Thanks for the bug report. I added a hook in #7 that should solve this issue. If you want to upgrade to 0.8.0 and try it out, I would appreciate your feedback.