Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[jrafaaael]

Hi, there! I get this error (see attached image) when I use the Composition API and the Options API. Said error appears when I edit the script section of my component and save the changes.

<template>
  <VueApexCharts width="500" type="bar" :options="options" :series="series"></VueApexCharts>
  <button @click="newSeries">new series</button>
</template>

<script>
import VueApexCharts from "vue3-apexcharts";

import { ref } from "@vue/reactivity";

export default {
  name: "App",
  components: {
    VueApexCharts,
  },
  setup() {
    const options = ref({
      chart: {
        id: "vuechart-example",
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
      },
    });
    const series = ref([
      {
        name: "series-1",
        data: [30, 40, 45, 50, 49, 60, 70, 91],
      },
    ]);

    const newSeries = () => {
      const max = 90;
      const min = 45;
      const newData = series.value[0].data.map(() => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      });
      series.value = [
        {
          data: newData,
        },
      ];
    };
    return {
      newSeries,
      options,
      series,
    };
  },
};
</script>

<style></style>

[markusand]

I get the same error when mounting and unmounting the component using the v-if directive

[Atif-Bashir-1998]

I am also getting the same issue. Has anyone got the solution?

[giapdong]

@jrafaaael @junedchhipa I think this issue occur from Vue3 or this version not full compatible with Vue 3.x, try wrap your template with div tag same with Vue2:

<template>
  <div>
     <VueApexCharts width="500" type="bar" :options="options" :series="series"></VueApexCharts>
     <button @click="newSeries">new series</button>
  </div>
</template>

It work well for me. Live reload after change from SFC(Single File Component) still work well!