"Cannot ready property 'container' of null" when using musicKit

The only information I've been able to find so far is in another thread here:

https://forums.developer.apple.com/message/329776#329776


I'm writing an angular app that utilizes musicKit.js. Running locally (the angular app points to localhost ONLY), the following code (shortened for the sake of this post) works fine:


  playSong(songs: any[], index: number): Observable {
    if(songs) {
      //songs play without the forEach, but musicKit still complains about not finding container.id in the song object
      songs.forEach(song => song['container'] = { 'id' : song.id });


      return from(this.musicKitService.setQueue({ 'items': songs, startPosition: index}))
        .pipe(mergeMap(x => this.play()));
    }
  }

  modifyPlayback(arg: Observable): Observable {
    return arg.pipe(map(x => this.setTitle()));
  }


  play(): Observable {
    return this.modifyPlayback(from(this.player.play()));
  }


If you're not familiar with rxjs, this is essentially whats going on:


1. The user chooses a song

2. The song has an index

3. For each song in the queue, give it the "container.id" property that musicKit needs in some cases

4. Call the musicKitService.setQueue (which calls musicKit.setQueue(arg), I didn't include that above)

5. After the setQueue method completes we call the play() method at the bottom.

6. We can ignore what happens in modifyPlayback, its an angular thing

7. Then we just call the musicKit.player.play() method to play the latest song in the queue. This is where we get the following error:


core.js:14597 ERROR TypeError: Cannot read property 'container' of null
    at Player. (musickit.js:formatted:6614)
    at musickit.js:formatted:726
    at Object.next (musickit.js:formatted:739)
    at fulfilled (musickit.js:formatted:627)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:16156)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)



21:08:38.100 core.js:14597 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'isFairplay' of undefined
TypeError: Cannot read property 'isFairplay' of undefined
    at MediaExtension.get [as isFairplay] (musickit.js:formatted:5020)
    at musickit.js:formatted:6728
    at Array.filter ()
    at Player._playbackDataForItem (musickit.js:formatted:6726)
    at Player. (musickit.js:formatted:6504)
    at musickit.js:formatted:726


I think the "isFairplay" part of the error is just transient and the real issue is the other. The issue occurs when I'm trying to run the application on a server rather than on my local. I change nothing in between deploying on local and deploying on the server. I can provide the full code if needed, but I'm trying to keep it simple above. This happens to more than just my own account

Accepted Reply

Solution:


In chrome at least, musicKit.js requires that the site being hosted is using SSL. This was not a problem for me running everything locally, but if I even ran against my network's IP address, SSL was required. I stopped getting the errors once I set up https on my server.

Replies

I also forgot to mention in the original post: this ONLY occurs in chrome. The code works fine in Firefox and in mobile safari.

Please file a bug report about this using our bug reporting system at: https://developer.apple.com/bug-reporting/

Solution:


In chrome at least, musicKit.js requires that the site being hosted is using SSL. This was not a problem for me running everything locally, but if I even ran against my network's IP address, SSL was required. I stopped getting the errors once I set up https on my server.