Unhandled Rejection (TypeError): Cannot read property 'Player' of undefined

[Alan Tang]

Hi,

Having trouble simply running the demo in my webapp, it seems very straightforward, however I'm unsure why I'm getting the following error

Here is the barebones code below:

import { SpotifyAuth, Scopes } from "react-spotify-auth";
import { SpotifyApiContext } from "react-spotify-api";
import "react-spotify-auth/dist/index.css";
import SpotifyPlayer from "react-spotify-web-playback";
import Cookies from "js-cookie";

import Episodes from "./Episodes";

function App() {
const token = Cookies.get("spotifyAuthToken");

return (

{token ? (
<SpotifyApiContext.Provider value={token}>
<SpotifyPlayer
token={token}
uris={["spotify🧑‍🎨7A0awCXkE1FtSU8B0qwOJQ"]}
/>

      <Episodes token={token} />
    </SpotifyApiContext.Provider>
  ) : (
    // Display the login page
    <SpotifyAuth
      redirectUri="http://localhost:3000/callback/"
      clientID="1d54f201e7a04ba689f81a469340ea22"
      scopes={[
        Scopes.streaming,
        Scopes.userReadEmail,
        Scopes.userReadPrivate,
        Scopes.userLibraryRead,
        Scopes.userLibraryModify,
        Scopes.userModifyPlaybackState,
        Scopes.userFollowModify,
        Scopes.userReadPlaybackState,
      ]}
    />
  )}
</div>

);
}

Note: Using another package, react-spotify-auth for OAuth. I've tested the key(s) obtained from there in your demo and am able to play the demo songs from Jamie XX.

[Gil Barbara]

Apparently, the Spotify SDK isn't being loaded.
Can you create a codesandbox with this scenario?

[Alan Tang]

Apologies, after importing my repo to a sandbox, I'm getting a CORS error , and now with that I'm a little confused on how to fix:
https://codesandbox.io/s/condescending-dan-78bgp?file=/src/App.js

The only line I changed was line 27 to "your client id"

[Gil Barbara]

I can't help with that.

But try to simplify the setup, just load this player and set a token manually. if it works, it's not a problem with this library.
Just like the demo...