Receiving "this._streamer is null" error when trying to use Spotify SDK in desktop browser

[jfk52917]

Plan

Premium

Country

United States

Device

MacBook Pro 2020 T2

Operating System

macOS 12

My Question or Issue

Hi all,

When trying to utilize the Spotify SDK in a browser-based React/Express/Node/SQL application, I'm able to successfully authenticate and connect the application, but when trying to interact with playback at all, such as using the getCurrentState or togglePlay features, I receive the error "Uncaught TypeError: this._streamer is null." This is even when simply copying and pasting Spotify's own boilerplate web playback React component, available here, into the application.

As such, I'm really stuck on what the issue might be. I went back through the list of permissions requested and don't appear to be missing any relevant ones to enable the SDK. I thought perhaps it had something to do with how I'm fetching the Spotify access token, but I am able to use that in other areas of the app with the Spotify API to search and to query data about relevant albums. Does anyone have any insight into this?

[jfk52917]

An update to the situation: I still receive the same errors in the Firefox developer console when working with the SDK, but for some reason, audio is now playing and skipping properly

[jfk52917]

I take that back, it worked literally once for some reason, and now the problem persists, even when using Spotify's own boilerplate code tacked onto mine. I've tried merely running the entire Spotify SDK boilerplate to compare and debug, but have abandoned that due to numerous issues within it.

[jfk52917 · Accepted solution]

For anyone else facing this issue, the solution here does solve the problem for some reason. If working with React 18, this means you will need to downgrade to React 17 and React-DOM 17, and when importing React-DOM in index.js or App.js, you'll have to import from 'react-dom' instead of 'react-dom/client.' I still can't believe this is the solution to this problem.