topic Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade in Integration, Extension & APIs

My 'define(["text!./main.css", "text!./template.html")' fails after upgrade to Nov 2019

vegard_bakke — Sat, 16 Nov 2024 03:28:13 GMT

Hi all!

We just updated from Qlik Sense from Nov 2018 to Nov 2019. And our extensions in our webapp (external mashup) failed when loading their CSS and HTML files.

The extension code line:

define(["qlik", "text!./main.css", "text!./template.html"], ...

Previously loaded:

/extensions/tooltip/main.css
/extensions/tooltip/template.html

Now they load:

/extensions/tooltip/main.css.js
/extensions/tooltip/template.html.js

Obviously I've missed something that's changed last year. But can anyone help pinpoint what the new way is?

Best regards,
Vegard

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

Aiham_Azmeh — Mon, 27 Jan 2020 08:46:55 GMT

Hi @vegard_bakke ,

There are no, (afaik), known issues between those 2 releases, one of my colleagues pointed that it may be a cross-domain issue. Can you post the console error, if there's any?

/aiham

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

vegard_bakke — Mon, 27 Jan 2020 14:10:22 GMT

Thank you for your tip! CORS could definitely break the require load.

But the only CORS problem I get is related to /api/v1/csrf-token.

We have two sites. The mashup site: test.feature.company.com,
and Qlik Sense: test.qlik.company.com.

The requests have:

Origin: test.feature.company.com

And the responses have:

Access-Control-Allow-Origin: test.feature.company.com

The console log is:

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

vegard_bakke — Mon, 27 Jan 2020 15:01:05 GMT

We are overriding useXhr (legacy from v 3.2). May things have change regarding this?

Our require config:

config: { text: { useXhr: function() { return true; } } }

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

Aiham_Azmeh — Mon, 27 Jan 2020 15:30:29 GMT

Hi again,

The console says : `No 'Access-control-allow-origin' header is present` so you probably need to add extra response header in QMC > Virtual proxies > Edit Virtual Proxy > Advanced > Additional response headers -- see here -> https://support.qlik.com/articles/000044178

But I don't think Nov 2019 release will allow you to use `*` as value, you will need to specifically add the domain:
`Allow-Control-Access-Origin:test.feature.company.com`

The `/api/v1/csrf-token` call is only needed by Qlik Sense Cloud deployments - it shouldn't be a problem, you can ignore it.

I hope this helps,

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

vegard_bakke — Tue, 28 Jan 2020 13:20:33 GMT

True, but the error message about the "No 'Access-control-allow-origin' header is present", is regarding the /api/v1/csrf-token call.

(See https://community.qlik.com/t5/Qlik-Sense-Integration-Extensions-APIs/mashup-CSRF-access-error-after-upgrade-to-September-2019-release/m-p/1646413#M11773)

The other requests already have Allow-Control-Access-Origin:test.feature.company.com.

(You are right about the '*'. But Nov 2018 did not allow Allow-Control-Access-Origin: *, either, as it had started using 'Access-Control-Allow-Credentials: true')

I tried:

define(["css!./main.css", "html!./template.html")

This actually loads the CSS, but when Qlik attempts loading the html file, it tries: 'template_unnormalized4'.

Vegard

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade

romankoba — Wed, 28 Apr 2021 18:07:18 GMT

Hi Vegard,

Did you find the solution for the issue?

When I override useXhr - I got unauthorized exception, when I don't - it tries to load some.html.js as you've mentioned.

Regards,

Roman

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade to Nov 2019

vegard_bakke — Wed, 28 Apr 2021 18:44:23 GMT

Is this for the `text!` entries only?

The text library of requirejs, distrusts cross-site xhrs, unless they end in '.js'. Therefore is adds the '.js'. (Don't ask me why this is a good idea.)

Defining useXhr, require loads the correct url, but it does not include cookies. (Your credentials, and most importantly: your Qlik session cookie is dropped.)

Therefore you get unauthorized on the request.

So in addition to `useXhr`, you need to define `createXhr`.

This is what we used one place:

config: { text: { useXhr: function (url, protocol, hostname, port) { // enable xhr load for all text resources return true; }, createXhr: function () { // use withCredentials flag to prevent authentication errors var xhr = new XMLHttpRequest(); xhr.withCredentials = true; return xhr; }, }, } }

Hope this helps,

Re: My 'define(["text!./main.css", "text!./template.html")' fails after upgrade to Nov 2019

romankoba — Thu, 29 Apr 2021 19:32:44 GMT

that helped, thank you a lot!

Roman