TypeError: Cannot read property of undefined while using spotify's api

Question

I'm trying to link the spotify's API to my app, but when i try to run the code, the following error appears :

here's the code: First, i use the useEffect to put the script tag and link the API, then, i declare the var Spotify , but when the page loads it didn't find the property Player in Spotify

 import React, { useEffect } from 'react' function SpotifyPlayer() { var Spotify:any useEffect(() => { const script = document.createElement('script'); script.src = "https://sdk.scdn.co/spotify-player.js"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []); (window as any).onSpotifyWebPlaybackSDKReady = () => { const token = '[token]'; const player = new Spotify.Player({ name: 'Web Playback SDK Quick Start Player', getOAuthToken: (cb:any) => { cb(token); } }); // Error handling player.addListener('initialization_error', ({message}:any ) => { console.error(message); }); player.addListener('authentication_error', ({ message }:any) => { console.error(message); }); player.addListener('account_error', ({ message }:any) => { console.error(message); }); player.addListener('playback_error', ({ message }:any) => { console.error(message); }); // Playback status updates player.addListener('player_state_changed', (state:any) => { console.log(state); }); // Ready player.addListener('ready', ({ device_id }:any) => { console.log('Ready with Device ID', device_id); }); // Not Ready player.addListener('not_ready', ({ device_id }:any) => { console.log('Device ID has gone offline', device_id); }); // Connect to the player! player.connect(); }; return <h1>Spotify Player</h1> } export default SpotifyPlayer

-> I'm using React too.

Answer 1

Your typing for Spotify any doesn't have any properties. ;) Best bet would check if Spotify has a type library and use it here. Otherwise you can use a type with the properties you pointing to.

type SpotifyType {
  properties: any; // better to look for the typing config
}

var Spotify:SpotifyType

Another option is to try ! Nonnull assertion

const player = new Spotify!.Player({
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: (cb:any) => { cb(token); }
    });