Third party library throws error due to incompatibility?

Hi team,

I am using a third party library which is throwing the error while loading the library.

Uncaught TypeError: n.__extends is not a function

As this library works fine in an environment outside of Backendless I assume that this could be a conflict with a Backendless library. Do you have an idea how this could be mitigated or have you ever experienced something like this before?

Regards, Joerg

Hello @Jorg_Beyer

Could you please share the library so we can reproduce this?

Regards,
Inna

Good morning,

sure.
https://sdk.scdn.co/spotify-player.js

Regards, Joerg

Hi @Jorg_Beyer

I assume we are talking about UIBuilder, is that correct?
Please create a new UI Container and provide a minimum UI/Logic/Components/etc to reproduce the issue and then share it with us:

  • appId
  • container name
  • any additional steps which can help us reproduce the problem

and we will take a look

Regards,
Vlad

Hi there,

AppId: A2090C1B-936C-A876-FF32-277A55A60700
there is only one Container and the page is “initialize”. You will be directed to the published production site and should see the error in the console.

Yes, everything is in the UI Builder, you can ignore the API services.

Best of luck,
Joerg

it seems like the Spotify library requires other packages

try to load the lib as it described in their doc

https://developer.spotify.com/documentation/web-playback-sdk/howtos/web-app-player

 const script = document.createElement("script");
    script.src = "https://sdk.scdn.co/spotify-player.js";
    script.async = true;

    document.body.appendChild(script);

    window.onSpotifyWebPlaybackSDKReady = () => {

        const player = new window.Spotify.Player({
            name: 'Web Playback SDK',
            getOAuthToken: cb => { cb(props.token); },
            volume: 0.5
        });

        setPlayer(player);

        player.addListener('ready', ({ device_id }) => {
            console.log('Ready with Device ID', device_id);
        });

        player.addListener('not_ready', ({ device_id }) => {
            console.log('Device ID has gone offline', device_id);
        });


        player.connect();

    };

This is the loading and set-up of the Player, not the loading of the SDK.
I do this in the later step according to their recommendation.

But this step fails due to the fact that the SDK is not ready, so this command onSpotifyWebPlaybackSDKReady cannot be executed and no player variable can be assigned.

But, your wish is my command. I have create the page with this code now. The effect is the same. Please check it out.

You need to start with the initialize Page in the development environment and you will be redirected after getting the token to the published standaloneTest Page. At OnPageEnter the code will be executed.

Any idea?

Regards, Joerg

As far as I understand, the root of the issue is tslib library (it’s nonexistent in our environment)

Could you share your full setup which you mentioned here:

As this library works fine in an environment outside of Backendless

The TS library is Type Script related. Are you not using Type Script?

I have created a bubble.io page (free version) with the script and it works just fine. The page just contains the script and a button that executes the script in a workflow.

As the auth code is hard-coded and the lifetime is only a couple of minutes I cannot share the URL with you here. But I can share the content of the player variable after the execution of onSpotifyWebPlaybackSDKReady:

image

Does that help?

Regards, Joerg

No, we not.

Does that help?

I guess no.

Please check the Settings and Custom Head content, looks like I have successfully initiated the library, but face another error with authentication.

Also, pay attention that Spotify redirects you not to the page that is in developing(preview) but to a page in production.

Hi Dima,

the idea with the Custom Head content is great and seem to work. The authentication error is clear to me. To get an Auth Code you have to call a special Spotify Page first that will redirect you to your URL (cannot be the development page) with the actual code.

Thanks for your persistence, great support.

Regards, Joerg