Property 'onSpotifyWebPlaybackSDKReady' does not exist on type 'Window & typeof globalThis'.

[Olajuwon Adedamola]

Property 'onSpotifyWebPlaybackSDKReady' does not exist on type 'Window & typeof globalThis'. How do I fix this? I keep on getting it.

[Gil Barbara]

hey @o-laj

Without additional context or a codesandbox example (preferably), it's impossible to know what is going on.

[Olajuwon Adedamola]

So, I'm getting this error up here on the browser.

Then I went to the row number in the source file based on the path it wrote on the browser screen.

And it started saying: " Property 'onSpotifyWebPlaybackSDKReady' does not exist on type 'Window & typeof globalThis'." in my terminal

And here is my code...

import React, { useCallback, useState } from 'react'
import SpotifyPlayer, { STATUS, CallbackState } from 'react-spotify-web-playback';

export default function Dashboard({ spotify})
{   
    const [{ token }, dispatch] = UseDataLayerValue()
   
     //FOR THE PLAYER 
     const [isPlaying, setIsPlaying] = useState(false);
     const [playerToken, setPlayerToken]  =  useState(token || ' ' );

     const handleCallback = useCallback(({ type, ...state } : CallbackState) => 
     {
        console.group(`RSWP: ${type}`);
        console.log(state);
        console.groupEnd();
    
        setIsPlaying(state.isPlaying);
    
        if (state.status === STATUS.ERROR && state.errorType === 'authentication_error') {
          localStorage.removeItem('rswp_token');
          setPlayerToken('');
        }
      }, []);
      //END

    return (
       <>
                 
                         <SpotifyPlayer
                                token={token}
                                uris={['spotify:artist:6HQYnRM4OzToCYPpVBInuU']}
                                
                                autoPlay={false}
                                callback={handleCallback}
                                persistDeviceSelection={false}
                                play={isPlaying}
                                showSaveIcon
                                syncExternalDevice
                                isActive={true}
                                magnifySliderOnHover={true}

                                styles={{                   
                                    altColor: '#0000e6',
                                    height: '10vh',
                                    sliderHandleColor: 'grey',
                                    //sliderHeight: '1vh',
                                    activeColor: '#0000e6',
                                    bgColor: 'black',
                                    color: 'white',
                                    loaderColor: '#0000e6',
                                    sliderColor: '#0000e6',
                                    trackArtistColor: 'white',
                                    trackNameColor: 'white',
                                  }}
                            />
            
        </>
                 
    )
}

[Gil Barbara]

The error you are getting in the UI isn't TypeScript related, so probably your editor can't find the global type definitions when you are viewing the source code.

I don't know what UseDataLayerValue does, is it async?
Try to render the player conditionally when the token is available?

{!!token && <SpotifyPlayer... />}

[Olajuwon Adedamola]

Okay thanks