Uncaught DOMException: Failed to execute 'removeChild' on 'Node'

[treyssatvincent]

When updating the data of a charts I have the following error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Even with this code from the README:

<script>
  import Chart from 'svelte-frappe-charts';

  let data = {
    labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
    datasets: [
      {
        values: [10, 12, 3, 9, 8, 15, 9]
      }
    ]
  };

  let chartRef;

  function updateData() {
    data = {
      labels: ['Friday', 'Saturday', 'Sunday'],
      datasets: [
        {
          values: [300, 380, 275]
        }
      ]
    };
  }
</script>

<Chart data={data} type="line" bind:this={chartRef} />

<button on:click={updateData}>Update Chart</button>

[smtl]

I also get this. As a result, the chart does not show at all.

[bry-an]

I also got this issue, and was never able to display a chart. After reimplementing the wrapper component myself with the frappe-charts library, I realized the issue is caused by afterUpdate hook here: https://github.com/himynameisdave/svelte-frappe-charts/blob/main/src/components/base.svelte#L80

In my code, I created a reactive declaration that updated the chart when its data changed, and that seemed to handle updating the chart as much as I needed it to.

@himynameisdave I can create a PR for this change if you want.

[himynameisdave]

@bry-an a PR would be greatly appreciated!

Just to clarify, are you suggesting that we drop the afterUpdate hook in favour of storing the chart var as a reactive declaration?

[bry-an]

@himynameisdave It would just be changing afterUpdate(() => chart.update(data)) to $: updateChart(data) where updateChart is just chart.update(data) wrapped in the ifChartThen helper. That way, when incoming data changes, it should update the chart. I haven't had a chance to thoroughly test this, but it appeared to handle updates to the data well enough for the example data.

[himynameisdave]

@bry-an sounds reasonable to me! Feel free to open a PR with those changes, otherwise I will when I have some time next weekend.

[himynameisdave]

I was unable to reproduce this issue, however the suggested fix #45 works and seems like it's the preferred Svelte way of doing things, so I will approve. Nevermind, played around with it some more and was able to reproduce.

@treyssatvincent && @smtl && @bry-an Wondering what browser you were seeing this in? What bundler were you using to build your app? Just trying to understand how to better reproduce this.