Cannot read properties of undefined (reading 'params'), Vue3

Description

When using wavesurfer plugin, it seems the surfer never gets initiated which result in params not found within the wavesurfermiddleware.

Steps to reproduce

Vue component file

<template>
    <div id="media-canvas" class="relative">
        <video class="video-js vjs-default-skin" id="media-player" playsinline>
            <source v-for="media of medias" :key="media.media_path" :src="media.media_path">
        </video> 
    </div>
</template>
<script>
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import wavesurfer from 'videojs-wavesurfer';
export default {
    props: ['medias'],
    data() {
        return {
            player      : null,
            playing     : false,
            mediaConfig: {//https://github.com/videojs/video.js/blob/master/docs/guides/options.md
                controls  : true,
                bigPlayButton: false,
                loop      : false,
                autoplay  : false,
                fluid     : true,
                controlBar: {
                    deviceButton    : false,
                    pipToggle       : false,
                    recordToggle    : false,
                    fullscreenToggle: false
                },
                plugins   : {
                    wavesurfer: { //https://wavesurfer-js.org/docs/options.html
                        backend            : 'WebAudio',
                        displayMilliseconds: true,
                        debug              : true,
                        waveColor          : '#c2ebff',
                        progressColor      : 'black',
                        cursorWidth        : 2,
                        hideScrollbar      : true
                    }
                }
            }
        }
    },
    mounted() {
        toast.loading();
        this.initMedia().then(()=>toast.hide_loading());
    },
    beforeUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    },
    methods: {
        initMedia() {
            return new Promise((resolve, reject) => {
                try {
                    if (this.player) {
                        this.player.dispose();
                    }
                    this.player = videojs('#media-player', this.mediaConfig);
                    this.player.on('deviceReady', () => {
                        this.loading = false;
                        this.ready   = true;
                    });

                    this.player.on('error', (element, error) => {
                        this.mediaError.push(error);
                    });

                    resolve();
                } catch (e) {
                    reject(e);
                }
            });
        }
    }
}
</script>

Results

Expected

Please describe what you expected to see. wavesufer should display

Actual

when using the component and loading a webm file via the medias prop.getting error The error is coming from videojs.wavesurfer.js -> WavesurferMiddleware()-> var backend=this.player.wavesurfer().surfer.params.backend;

Seems wavesurfer().sufer is undefined.

Error output

Uncaught TypeError: Cannot read properties of undefined (reading 'params')
    at Object.setSource (videojs.wavesurfer.js?66e3:144:1)
    at setSourceHelper (video.es.js?31bb:10175:1)
    at setSourceHelper (video.es.js?31bb:10193:1)
    at Player.eval (video.es.js?31bb:9931:1)
    at eval (video.es.js?31bb:5140:1)

Versions

videojs/wavesurfer

video.js:7.17 videojs-wavesurfer:3.8.0 wavesurfer.js:6.0.1

Browsers

chrome

OSes

Linux

[thijstriemstra]

I fixed the issue in the guide, please try again.

[thijstriemstra]

Looks like vue had a new major release (v5). I followed the guide and ended up with errors while running npm run serve. I’ll take a look at the problem later.

 ERROR  Failed to compile with 5 errors                                                                      3:43:14 PM

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'video.js/dist/video-js.css' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'video.js' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'wavesurfer.js' in '/private/tmp/videojs-wavesurfer-app/src/components'

 error  in ./src/components/VideoJSWavesurfer.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'videojs-wavesurfer/dist/videojs.wavesurfer.js' in '/private/tmp/videojs-wavesurfer-app/src/components'