Skip to content

“ReferenceError: XMLHttpRequest is not defined” when using getServerSideProps() with NextJS

I’m trying out NextJS with SSR and I’m getting the following error when using the spotify-web-api-js library (witch works fine on the client side) to get a playlist’s data:

error - ReferenceError: XMLHttpRequest is not defined
    at _performRequest (D:GitHubspotify-stats.jsnode_modulesspotify-web-api-jssrcspotify-web-api.js:75:15)
    at _checkParamsAndPerformRequest (D:GitHubspotify-stats.jsnode_modulesspotify-web-api-jssrcspotify-web-api.js:169:12)
    at Constr.getPlaylistTracks (D:GitHubspotify-stats.jsnode_modulesspotify-web-api-jssrcspotify-web-api.js:759:12)
    at getServerSideProps (webpack-internal:///./pages/index.js:416:85)
    at Object.renderToHTML (D:GitHubspotify-stats.jsnode_modulesnextdistserverrender.js:508:26)
    at async doRender (D:GitHubspotify-stats.jsnode_modulesnextdistserverbase-server.js:669:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (D:GitHubspotify-stats.jsnode_modulesnextdistserverbase-server.js:778:28)
    at async D:GitHubspotify-stats.jsnode_modulesnextdistserverresponse-cacheindex.js:80:36 {
  page: '/'

The code inside the getServerSideProps is the following:

export async function getServerSideProps() {
  const res = await SpotifyApi.getPlaylistTracks("37i9dQZEVXbMDoHDwVN2tF", {
    limit: 4,
  const list = res.items;
  console.log("items", list);
  const data = {};
  return { props: { data } };

Is there any way to fix this issue or should I use the “server” version for SSR (and have one more library with the same functionality of the client one just for this page)?



The XMLHttpRequest API isn’t provided in node.js. I suppose it’s possible to use a module that does but it would probably be better to use a library that is intended to be used for both client and server side (isomorphic).

Taking a look at spotify’s web api documentation I notice that they list a bunch of wrappers of their API for different languages and environments. This isomorphic one sticks out to me as the best option for your usecase.

User contributions licensed under: CC BY-SA
2 People found this is helpful