Document Vue best practices

Have you read the FAQ and checked for duplicate open issues? Yes

What version of Shaka Player are you using? 3.0.8, tried 2.5.20 aswell

Can you reproduce the issue with our latest release version? Yes

Can you reproduce the issue with the latest code from master? I have not tried,

Are you using the demo app or your own custom app? Custom app

If custom app, can you reproduce the issue using our demo app? No, I feel this is an issue in my code

What browser and OS are you using? Brave, Windows 10

What are the manifest and license server URIs?

What did you do?

So, I have a vuejs 3 application where I want to load a dash manifest. Here is my code:

                            const shaka = import("shaka-player/dist/shaka-player.compiled.js");
                            shaka
                            .then(shaka => shaka.default)
                            .then(shaka => {
                                this.player = new shaka.Player(
                                    this.$refs.player
                                );

                                var streams = [];

                                streams.push(...this.video.audioStreams);
                                streams.push(...this.video.videoStreams);

                                const dash = require("../utils/DashUtils.js").default.generate_dash_file_from_formats(
                                    streams,
                                    this.video.duration
                                );

                                this.player.load(
                                    "data:application/dash+xml;charset=utf-8;base64," +
                                        btoa(dash)
                                );
                            });

What did you expect to happen? Load the playlist correctly.

What actually happened?

Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at Object.je (shaka-player.compiled.js?446e:286)
    at xa.eval [as b] (shaka-player.compiled.js?446e:258)
    at Ca (shaka-player.compiled.js?446e:22)
    at Ea.next (shaka-player.compiled.js?446e:23)
    at eval (shaka-player.compiled.js?446e:24)
    at new Promise (<anonymous>)
    at Ga (shaka-player.compiled.js?446e:24)
    at J (shaka-player.compiled.js?446e:24)
    at Ih (shaka-player.compiled.js?446e:258)
    at xa.eval [as b] (shaka-player.compiled.js?446e:257)

[theodab]

So, I ended up looking into this again (because of #3622), and found the root cause of that Cannot read property 'name' of null error.

It appears that Shaka Player cannot handle being made into a reactive object, which is what happens if you put it into a Vue data object. I found, in your demo code, that if you define Shaka Player outside of a data object (or prefix the variable name with $ or _ to make Vue not make it reactive) it loads the asset successfully.

This is a problem because, if Vue converts an object to one of its special Proxy objects, it also converts nested objects within that object into Proxy objects. This leads to some of our internal workings being converted into proxies, which causes some object equality checks to fail when they should be succeeding (because proxies are not equal to the object they are wrapping). In your demo code, this line in particular is the one that is affected.

I’ll update our documentation to mention that Shaka Player should not be converted into a Vue reactive object.

[ismena]

Hi @FireMasterK sorry for the delay, let me take this over. I’m able to reproduce with your app. Things I noticed:

• This manifest loads fine in the demo page, so it probably is a problem with the app code
• The logs say, the problem’s coming from our Walker/Load graph logic. One of my least favorite pieces of code. Sigh. 😉
• Beyond that, log’s aren’t terribly helpful

@FireMasterK Could you help me out a bit, I haven’t worked with Vue before and am not sure how to do something. Is there a way to load our uncompiled library with your app? (See our debugging tutorial for an example). If we can do it, I’d be able to drill down into what exactly is throwing the error.

Thanks!