Build error - properties undefined after build

Ionic Framework Ionic Vue
1

I am busy building a small music player using ionic vue and howler.js. Everything is working fine on my local machine, but when I build and upload to the web I get the following error:

TypeError: Cannot read properties of undefined (reading ‘player’).

Here is my code before the build:

const activeTrack = ref(null);
const player = ref(null);
const isPlaying = ref(false);
const progress = ref(0);
const activeTrackDuration = ref(0);
const progressTime = ref(0);

function startTrack(track) {
    //if playing, stop the old song.
    if(this.player) {
        this.player.stop();
    }
    this.player = new Howl({
        src: [track.url],
        html5: true,
        onplay: () => {
            this.isPlaying = true;
            this.activeTrack = track;
            this.updateProgress();
        },
        onend: () => {
            this.nextTrack();
        }
    });
    this.player.play();
}

And here is the code generated by the build

r = O(null)
          , l = O(!1)
          , i = O(0)
          , c = O(0)
          , d = O(0);
        function y(t) {
            this.player && this.player.stop(),
            this.player = new J.Howl({
                src: [t.url],
                html5: !0,
                onplay: ()=>{
                    this.isPlaying = !0,
                    this.activeTrack = t,
                    this.updateProgress()
                }
                ,
                onend: ()=>{
                    this.nextTrack()
                }
            }),
            this.player.play()
        }

I would appreciate it if someone can point me to my error.

2

Wherever you are using this.player you need to do player.value since it is wrapped in a ref. Note that you don’t usually need this. either.

See Reactivity Fundamentals | Vue.js.

3

Thank you. It did not help me fix the problem with this version, but it put me on the right track. I rebuilt it with HTML5 and it is working now.

1 Like