[Vue warn]: Error in mounted hook: "Error: Container element not found"

Hello,

I am using Wavesurfer 4.4.0

“wavesurfer.js”: “^4.4.0”

In vue, I am trying to use it as:

<div id="waveform" ref="waveform"></div>


import WaveSurfer from 'wavesurfer.js';


   mounted() {
        this.createWaveSurfer();
},


methods: {
        createWaveSurfer() {
            var wavesurfer = WaveSurfer.create({
                container: #waveform,
                waveColor: 'violet',
                progressColor: 'purple'
            });
            wavesurfer.on('ready', function () {
                wavesurfer.play();
            });
                wavesurfer.load(
                "https://mywebsite.com/storage/text/1611243371.wav"
            );
        },
}

I keep receiving this error:

[Vue warn]: Error in mounted hook: “Error: Container element not found”

Any idea why please?

Thank you.

[Benoit1980]

Please give me till the weekend, and I will recheck it on my local machine as I am away at the moment. I will keep you updated.

Thank you so much for your efforts 😃

[sundayz]

Are you showing the full component? Are you using v-if somewhere to hide the <div>?

Refs should be available in the mounted hook, you can test this easily:

<template>
    <div ref="myref"></div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$refs.myref); // should not be undefined
    }
}
</script>

In my project I load WaveSufer the same way as you do and it works.