topic Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed in Integration, Extension & APIs

Error when embedding an Qlik Sense Client-Managed app using qlik-embed

ASpivey01 — Thu, 15 Aug 2024 16:24:04 GMT

I am trying to put together a very simple demo where I embed a Qlik Sense app in a QS Client-Managed instance into a webpage using the qlik-embed library. Based on this qlik.dev page, it should be possible to do so but I am getting an error in the console saying it cannot find the /qlik-embed/main.js file.

Here is the HTML of page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qlik Web Components Test</title>
    <script crossorigin="anonymous" type="application/javascript"
        src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js" data-host="https://myQSEoWServer/myProxy"
        data-login-uri="https://myQSEoWServer/myProxy" data-cross-site-cookies="true"></script>
</head>

<body>
    <main>
        <h2>Here's a sheet:</h2>

        <qlik-embed app-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" sheet-id="zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz"
            ui="classic/app" style="display: contents;">
        </qlik-embed>
    </main>
</body>
</html>

And here is the error I get:

What I've tried so far:

I've tried adjusting the data-host and data-login-uri attributes to include and exclude the virtual proxy, all resulting in that same error.
I've searched the Qlik Community and Support forums, as well as Google and Bing, for this particular issue and similar issues to no avail.

Other info:

This webpage is hosted on a separate domain as the QS Client-Managed server but it is being served over HTTPS and has been whitelisted in the QMC. I am able to successfully use Enigma+Nebula and QRS calls from the same webpage.
There are no permissions issues with the app itself -- I am the owner of the app and I can open and view the app from the same virtual proxy.
I am currently logged into Qlik through that virtual proxy. Again, I'm able to embed through other methods but just not using qlik-embed.
The QSEoW server version is Qlik Sense February 2024 Patch 7.

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

alex_colombo — Mon, 19 Aug 2024 10:20:41 GMT

Hey @ASpivey01 this is a known issue on all CM version prior May 2024. Please upgrade your QlikSense on prem version and this issue should be fixed.

As workaroud, you can download the main.js file and import into your web app:

<script src="./imports/main.js"></script>

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

ASpivey01 — Mon, 19 Aug 2024 15:22:01 GMT

Thanks Alex! For the workaround, where can I download that main.js file from?

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

alex_colombo — Mon, 19 Aug 2024 15:25:15 GMT

You can download from here: https://_qlikServer_/resources/main.js

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

ASpivey01 — Mon, 19 Aug 2024 15:55:01 GMT

I added this to my header:

<script src="https://myQlikCMserver/myVirtualProxy/resources/main.js" crossorigin="use-credentials"></script>

...and that does load the main.js file but then it's trying to load the other resources relative to my mashup server:

I tried updating the script tag to include the data-cdn-base-url attribute to get the other resources from my Qlik CM server:

<script src="https://myQlikCMserver/myVirtualProxy/resources/main.js" crossorigin="use-credentials" data-cdn-base-url="https://myQlikCMserver/myVirtualProxy/resources"></script>

...but that only works for the import-map.json file:

Is there an attribute or global JS variable I need to set to make all of those imports be relative to the Qlik CM server rather than my mashup server?

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

alex_colombo — Tue, 20 Aug 2024 10:25:04 GMT

Hey @ASpivey01 please download the main.js and save it as local file into your project, then import as mentioned above. This should fix how import-map.json will be imported.

I tried on my end and embedding classic/app will not work, even with this workaround. For fix this you have to upgrade your env to May 2024.

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

jmoulden — Tue, 03 Sep 2024 21:11:02 GMT

I am facing a similar issue after upgrading to the latest version of Qlik for Windows, May 2024, and applying patch 4. I am receiving a Cross-Origin Read Blocking (CORB) error when the embed library tries to load main.js. I followed the settings outlined in the script file at https://qlik.dev/embed/qlik-embed/authenticate/connect-qlik-embed/#connecting-to-qlik-sense-enterprise-client-managed.

We use SSO and Azure AD, and it appears that main.js returns a (302 Authenticate at this location) response along with the https://login.microsoftonline.com URI, but the browser is unable to read the URL and authenticate. Am I missing any settings in the QMC? Any help would be greatly appreciated.

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

alex_colombo — Thu, 05 Sep 2024 12:22:41 GMT

Seems to be a bug, please open a support case on this.

Re: Error when embedding an Qlik Sense Client-Managed app using qlik-embed

Johannes_Twisk — Wed, 30 Oct 2024 09:12:02 GMT

You can probably use the HTML <base> tag. This solved it for me.

See "I recommend using the HTML <base> element:" at URL Specify a Root Path of your HTML directory for script links? - Stack Overflow

Hope it works for you. By the way, I am testing my qlik-embed html-page as an extension on the same server and I had to put the bas-tag inside the head-tag, like this: