Using pusher to trigger function in sveltekit but it can't read properties

Question

I have this code:

    function SpinWheel() {
        let min = 10;
        let max = 30;
        let degree = Math.floor(Math.random() * (max - min) * 1000);
        slice.style.transition = 'all 10s ease-out';
        slice.style.transform = `translate(-50%, 0%) rotate(${degree}deg)`;

        setTimeout(() => {
            slice.style.transition = 'none';
            let actualDeg = degree % 360;
            slice.style.transform = `translate(-50%, 0%) rotate(${actualDeg}deg)`;
        }, 10000);
    }

    //Subscribe to pusher channel
    const channel = pusher.subscribe('channel');
    channel.bind('event', (data: any) => {
        SpinWheel();
    });
</script>

<div class="WheelOfFortune">
    <canvas id="wheelCanvas" bind:this={wheelCanvas} width={canvas.width} height={canvas.height} />
    <canvas id="slice" bind:this={slice} width={canvas.width} height={canvas.height} />
    <canvas id="center" bind:this={center} width={canvas.width} height={canvas.height} />
</div>
<button on:click={SpinWheel}>SPIN</button>

everytime that im trying to trigger event via pusher i have a error but running function via button on:click{SpinWheel} works normal without any crash. Wierd thing is that function executes normal and the wheel spins but site crashes

undefined:84
                slice.style.transition = "all 10s ease-out";
                      ^

TypeError: Cannot read properties of undefined (reading 'style')

1. I tried defining a new Spin function inside channel.bind but still i have same error
2. When i define function inside channel.bind and execute it there but without refreshing site only hotreload it works but after refreshing site i have same crash again