Cannot add region after remove (v7, vue 3): 'Uncaught TypeError: this.element is null'

[iskrebzowa-voc]

We use wavesurfer v7 with vue 3.

1. init waversurfer and region plagin: it's ok
   

2. add region: it's ok, region count = 1
   

3. remove region. It is removed from UI, but region count still 1
   

4. add region again: fail with error 'Uncaught TypeError: this.element is null'
   

The files with code:

index.js:

import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js";

export default {
  data: () => ({
    surfer: null,
    surferRegions: null,
    reg: null,
    countregions: null,
  }),
  mounted() {
    this.createSurfer();
  },
  methods: {
    removeregions() {
      // this.surferRegions.clearRegions();
      this.reg.remove();
    },
    addregions() {
      this.reg = this.surferRegions.addRegion({
        start: 0,
        end: 1,
        content: "1",
        drag: false,
        resize: false,
      });
    },
    createSurfer() {
      var params = {
        container: "#testsurfer",
        url: "http://localhost:8556/api/v1/asset/file/library_noise/adf62869-40fc-456e-878f-936268993f2f",
      };

      var wavesurfer = WaveSurfer.create(params);
      this.surfer = wavesurfer;

      const surferRegions = RegionsPlugin.create();
      this.surfer.registerPlugin(surferRegions);
      this.surferRegions = surferRegions;
    },
    getcountregions() {
      this.countregions = this.surferRegions.getRegions().length;
    },
  },
};

index.vue

<script src="./index.js"></script>
<template>
  <q-page
    class="boxshadow no-wrap q-px-sm"
    style="overflow-y: hidden"
    :class="$q.screen.gt.sm ? 'column full-width' : 'row'"
  >
    <div id="testsurfer" />
    <q-btn @click="addregions">add regions</q-btn>
    <q-btn @click="removeregions">remove regions</q-btn>
    <q-btn @click="getcountregions">get count regions</q-btn>
    <br />
    <div class="row justify-center">count regions: {{ countregions }}</div>
  </q-page>
</template>

How to add and remove region correctly?

[katspaugh]

I can't tell what is wrong in your code, it looks OK.

However, here's a simplified example that works perfectly: https://wavesurfer-js.org/examples/#42e008b37cca15e0673917ae41f7599f

[vbrunko-voc]

Thanks for the response, would you recommend us to roll back to version 6 instead? Is there any experience people used it with Vue3JS?
We're actually open to ask for help :) it's ok to DM us.

[katspaugh]

No, I wouldn’t recommend that because that version won’t receive future updates. I recommend debugging your app to see what’s going on with that deleted region. From the looks of it, it’s not properly deleted for some reason.

[iskrebzowa-voc]

@katspaugh Thanks for response.
The reason that we use plagin with vue. We added 'reactive' in index.js and it's working now.
Usually reactivity does not need to be added manually. It's would be great if the plagin was more Vue-friendly.
New 'index.js' file:

import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js";
import { reactive } from "vue";

export default {
  data: () => ({
    state: reactive({
      surfer: null,
      surferRegions: null,
      reg: null,
    }),
    countregions: null,
  }),
  mounted() {
    this.createSurfer();
  },
  methods: {
    removeregions() {
      // this.surferRegions.clearRegions();
      this.reg.remove();
    },
    addregions() {
      this.reg = this.surferRegions.addRegion({
        start: 0,
        end: 1,
        content: "1",
        drag: false,
        resize: false,
      });
    },
    createSurfer() {
      var params = {
        container: "#testsurfer",
        url: "http://localhost:8556/api/v1/asset/file/library_noise/adf62869-40fc-456e-878f-936268993f2f",
      };

      var wavesurfer = WaveSurfer.create(params);
      this.surfer = wavesurfer;

      const surferRegions = RegionsPlugin.create();
      this.surfer.registerPlugin(surferRegions);
      this.surferRegions = surferRegions;
    },
    getcountregions() {
      this.countregions = this.surferRegions.getRegions().length;
    },
  },
};