Uncaught TypeError: Cannot read property 'togglePlay' of null

[bennetdev]

I am using the Spotify Playback SDK on my local site. This is my code:

window.onSpotifyWebPlaybackSDKReady = () => {
    const token = "<?php echo $_SESSION["accessToken"] ?>";
    const player = new Spotify.Player({
        name: 'Spotify Clone',
        getOAuthToken: cb => {
            cb(token);
        }
    });
    window.player = player;

    // Connect to the player!
    window.player.connect();

    // Error handling
    window.player.addListener('initialization_error', ({message}) => {
        console.error(message);
    });
    window.player.addListener('authentication_error', ({message}) => {
        console.error(message);
    });
    window.player.addListener('account_error', ({message}) => {
        console.error(message);
    });
    window.player.addListener('playback_error', ({message}) => {
        console.error(message);
    });

    // Playback status updates
    window.player.addListener('player_state_changed', state => {
        console.log(state);
    });

    // Ready
    window.player.addListener('ready', ({device_id}) => {
        console.log('Ready with Device ID', device_id);
    });

    // Not Ready
    window.player.addListener('not_ready', ({device_id}) => {
        console.log('Device ID has gone offline', device_id);
    });

}

document.getElementById("play-arrow").onclick = function () {
    window.player.togglePlay().then(() => {
        console.log('Toggled playback!');
    });
}

 Everything else is working. For example I can display the current position in the browser. Everything like togglePlay or skip or seek is only working like 10% of the time connecting to the device and I have to reload the page multiple times and connect. This is the error I get:

index.js:9 Uncaught TypeError: Cannot read property 'togglePlay' of null
at h._playbackControl (index.js:9)
at h._onTogglePlay (index.js:9)
at h._handleMessages (index.js:9)
at r._receiveMessage (index.js:9)

window.player is not Null, I checked it in the console.

Any ideas?

[jfk52917]

I'm having a similar issue, though the error stack is a bit different when I test in Firefox. I posted a few days ago, but no response yet. I'm testing to see if perhaps it's a synchronicity issue? Really stuck on this one, though.

[jfk52917]

I finally solved this problem via the Spotify Community post here. The gist of it - downgrade React and React-DOM in your package.json to version 17, alter your React-DOM statement per the linked post, and import React-DOM from 'react-dom' instead of 'react-dom/client' and everything should work.

[Artemis23-0]

So I'm about 4 years too late, but I also had this problem, and there's a way to fix it without downgrading. You just need parenthesis! Took me about three-ish hours to figure out, but if you replace your player_state_changed with this:

player.addListener('player_state_changed', ((state) => {

console.log('state changed');

if (!state) {

return;

}

console.log('track:');

console.log(state.track_window.current_track);

setTrack(state.track_window.current_track);

setPaused(state.paused);

player.getCurrentState().then((state) => {

(!state)? setActive(false) : setActive(true)

});

}));

it should work, I think!