× Unhandled Rejection (SyntaxError): Unexpected end of JSON input

Question

I have an if statement that checks if an access token is defined, if so it runs these 2 fetch requests. I have the first fetch request returning the information i want. I simply wanted to log the output of a separate fetch request that is taking info from a separate endpoint... My local server keeps returning the error mentioned above and i cant quite figure out why

Here is the code i am trying to run.

 componentDidMount() {
    let accessToken = queryString.parse(window.location.search).access_token;
    
    if (accessToken != undefined) {
      //working fetch request..
      fetch('https://api.spotify.com/v1/me', {
        headers: {'Authorization': 'Bearer ' + accessToken}
      }).then((response) => response.json())
      .then((data) => {
        this.setState({
          serverData: {
            user: {
              name: data.display_name,
              profileLink: data.external_urls.spotify,
              images: data.images
            }
          }
        });
        console.log(data);
        console.log(this.state.serverData);
      })

      // breaks on this line
      fetch('https://api.spotify.com/v1/me/player/currently-playing', {
        headers: {'Authorization': 'Bearer ' + accessToken}
      }).then((response) => response.json())
      // here i am simply trying to log the returned data
      .then((data) => console.log(data))
    }
  }

now i do believe this is probably a small syntax error but i cant seem to knock it, would really appreciate any incite into this bug, thanks!

Answer 1

Add .catch(error => console.log(error)) blocks after your .then() blocks, to see the error in the console and let me know what the error is. You'll get a lot more information like this.