Problem with importing third party app when UI5 is loaded through CDN.

[icostaykov]

Describe the bug When loading UI5 through the cdn and trying to import a third party library, following the tutorial, the third library cannot be imported. My current issue is with jsPdf, but I have faced it with another library as well. The error I get is the following: 'jspdf-16b990c3.js': failed to load 'jspdf-16b990c3.js' from https://sapui5.hana.ondemand.com/1.117.0/resources/jspdf-16b990c3.js...

What seems to circumvent the issue of the missing file is adding to the resourceRoots not only 'jspdf': 'resources/jspdf', but also 'jspdf-16b990c3': 'resources/jspdf-16b990c3'. However, this seems like an unreliable way to solve the issue. I am not sure how this hash at the end is being generated and cannot rely on it being the same when deployed to production.

It is important to note, that there are no issues when loading UI5 locally, instead of through the CDN.

To Reproduce Steps to reproduce the behavior:

1. Load UI5 through CDN - in index.html, in the script tag for loading UI5, set the src to "https://sapui5.hana.ondemand.com//resources/sap-ui-core.js"
2. Install jspdf - either npm i jspdf or yarn add jspdf
3. Either in the index.html resourceRoots, or in the manifest.json->sap.ui5->resourceRoots, add `"jspdf": "resources/jspdf"
4. Run npm start or yarn run start
5. See error

Expected behavior The app should import 3rd-party libraries without any issues, regardless of UI5 being loaded through the cdn or locally.

Desktop (please complete the following information):

• OS: Windows 11, observed also on macOS
• Browser Chrome
• Version 119

[petermuessig]

Hi @icostaykov ,

Please check the configuration options prependPathMappings which prepends the path mapping to the Component.js file or even better use the addToNamespace option which includes the thirdparty resources into the namespace of your application or library and rewrites the imports in the UI5 AMD-like modules and the XMLView.

Both options will fix your issue. You can also take a look into the README.md of the ui5-tooling-modules which describes these options: https://github.com/ui5-community/ui5-ecosystem-showcase/tree/main/packages/ui5-tooling-modules#configuration-options-in-yourappui5yaml

Best regards, Peter

[petermuessig]

In the tutorial you linked, the addToNamespace option is also put there in step 4.1: https://github.com/SAP-samples/ui5-typescript-tutorial/tree/main/exercises/ex4#exercise-41---installconfigure-ui5-tooling-extensions

Did you miss to set it correctly?

[icostaykov]

First, I would like to thank you for the really quick reply!

Unfortunately, I have followed the underlined part of the tutorial carefully. I had added both prependPathMappings and addToNamespace. I tried adding them separately and combined and I still get the same error. Maybe there is something else I am doing wrong?

[petermuessig]

Maybe you can attach your project to allow me to look into it?

[icostaykov]

Yes, @petermuessig, here is the repo I created to illustrate the issue.

[petermuessig]

@icostaykov

Thanks for sharing your repository - now it is clear to me what's going wrong in your case.

In your index.html you are using UI5 from CDN. In this case you need to instruct the UI5 module loader to load the jspdf dependencies from the local resources path so that the ui5-tooling-modules can generate these dependencies. I did so by configuring the following resourceroots:

        <script
            id="sap-ui-bootstrap"
            src="https://sdk.openui5.org/1.117.0/resources/sap-ui-core.js"
            data-sap-ui-resourceroots='{
                "com.myorg.myapp": "./",
                "jspdf": "./resources/jspdf",
                "jspdf-6b40b9e7": "resources/jspdf-6b40b9e7"
            }'

Both jspdf and the chunk jspdf-??? need to be listed here. The hash of the jspdf chunk may need to be updated once a newer version is being used.

The other option is that you consume OpenUI5 via the local development server from resources/sap-ui-core.js. Then the jspdf dependencies are loaded automatically from resource/jspdf*.

HTH and BR, Peter

[petermuessig]

One thing to add: I just solved the issue in your project but not recognizing your initial issue statement again now and your ask is different. Unfortunately, when loading UI5 via CDN, there is no real possibility to configure the resourceroots before the application is loaded - except what I do when using the prependPathMappings option - but this is only usable for the task so far. Changing the usage also for the middleware requires a rework of how ui5-tooling-modules works - maybe an x-mas project (unfortunately, that's just one of my topics on my list :cry).

Maybe one short term solution would be to put all chunks into a nested folder. I'll try that. Re-opening the issue for now, as I don't know how much time I'll have before x-mas...

[icostaykov]

Thanks a lot for taking so much of your time to help out!

I have an additional question that might eather make the situation better by hinting at an easy solution, or make it worse by complicating everything - importing other 3rd party libraries in some cases works without any hassle - e.g. the html2canvas library - I just have to add "html2canvas": "resources/html2canvas" without a separate entry with the hashed chunk and I am very confused why that happens.

I added it to the same repo to show what I mean.

[jonaszuberbuehler]

@petermuessig I've just updated from 3.2.4 to 3.2.5 and in my project "xlsx-js-style": "1.2.0" does not load correctly anymore. Anything we need to adapt?

[petermuessig]

ui5-tooling-modules version 3.2.6 should fix the issue!

[petermuessig]

@icostaykov - the chunks are created when the bundler finds dynamic require/import statements - or in some special cases, when the same modules are shared by 2 or more different modules, then the rollup bundler decides to create chunks for this.

With the next upcoming minor version of the ui5-tooling-modules, this may happen more often, since I plan to change the bundling in a way that I pass initially all entry modules and then let rollup decide how to bundle the whole 3rd party more effective. This is necessary to avoid conflicts, e.g. if the same module requires the same other module to avoid multiple packaging of those reused modules in other bundles.

HTH...

[Kalo2412]

I would like to reopen this ticket because I have similar issue. My case is with the following third-party lib: @sap-cloud-sdk/openapi where the problem is not the chunks but somehow the lib is not even bundled and transpilled when running on dev server. More information: 1) I have followed the exact same steps in this link: https://api.sap.com/api/SAP_CP_Neo_Connectivity_Destination/cloud-sdk/JavaScript

2) I receive the following error in the console:

ModuleError: Failed to resolve dependencies of 'ts/ui/controllers/Planner.controller.js' -> 'ts/ui/controllers/handlers/some.js' -> 'ts/services/managers/some2.js' -> 'ts/services/managers/some3.js' -> 'ts/generated/SAP_CP_Neo_Connectivity_Destination.js': failed to load 'ts/generated/SAP_CP_Neo_Connectivity_Destination.js' from ./generated/SAP_CP_Neo_Connectivity_Destination.js: 404 - Not Found

PS: The paths are correct so it does not seem to be the problem there.

Can you please check this as well?

Thanks, Kaloyan

[petermuessig]

Let me check - but will take a little bit

[petermuessig]

Hi @Kalo2412 ,

is there any example project you can share?

THX

[Kalo2412]

Hi @petermuessig , i will attach an example project which is just the ui5 typescript tutorial app with the mentioned lib installed. The error is similar. Thanks in advance. Example_Project.zip

[Kalo2412]

https://github.com/Kalo2412/UI5Test

[petermuessig]

Thanks @Kalo2412 - I found a few issues here and there - it's really tricky to make the SDK available via tooling-modules. The issue you reported is just the surface but an issue in the https://github.com/ui5-community/babel-plugin-transform-modules-ui5 - I need to fix the names of the imports to not allow dashes and more reserved characters. But then I stumble in bundling issues... I'll continue investigating it to provide a proper solution for you...

[petermuessig]

Fix for naming of variables of re-exports: https://github.com/ui5-community/babel-plugin-transform-modules-ui5/pull/122

Will be released with babel-plugin-transform-modules-ui5 version 7.2.7 - but still this doesn't completely fix your issue here...

[petermuessig]

I just found the following docu from the Cloud SDK guys which explains the usage in React / Angular: https://sap.github.io/cloud-sdk/docs/js/guides/browser

The biggest issue with the Cloud SDK is that is works somehow in the browser but it seams that it wasn't designed from scratch for that use case and therefore using a generic bundling step is cumbersome. In their docu they describe the webpack configuration to bundle it but I wonder if it still works with Angular / React. Anyways, this looks like a challenge.

For UI5 they got a ticket beginning of last year but they gave up in looking into supporting UI5: https://github.com/SAP/cloud-sdk-js/issues/704 😢