Search code examples
reactjsnext.jsspotify

onSpotifyWebPlaybackSDKReady is not defined

I'm making a clone of Spotify using NextJS and React. I want to use Web Playback SDK to play tracks, but when I import the script of SDK, it always not defined. Please help me to solve this problem, I have searched too much and not figure out what was the reason. Here is my code and error screen:

type Props = {
  children?: JSX.Element | JSX.Element[];
};

export default function Main({ children }: Props) {
  const recentlyTracks = useRecentlyTracks();
  const newRelease = useNewRelease();
  const futuredPlaylists = useFuturedPlaylists();

  return (
    <HomeContext.Provider
      value={{ recentlyTracks, newRelease, futuredPlaylists }}
    >
      <Script src="https://sdk.scdn.co/spotify-player.js" />
      <div className="w-main h-full bg-gradient-to-t from-start to-end overflow-y-scroll no-scrollbar pb-4">
        <Header />
        {children}
      </div>
    </HomeContext.Provider>
  );
}

enter image description here

Solution

  • You are including the tag directly within the JSX, which is not the way to properly load the SDK in a react application. Take a look here:

    https://github.com/niekert/use-spotify-web-playback-sdk for a solution on how to potentially load the SDK correctly using a hooks based approach.