[ui5-tooling-modules] ui5-tooling-modules-middleware not importing dependencies as expected

[Sajantoor]

Describe the bug
I am following the documentation for setting up ui5-tooling-modules: https://www.npmjs.com/package/ui5-tooling-modules. I was able to successfully setup ui5-tooling-modules-task but I cannot get ui5-tooling-modules-middleware to work. I see the following when I use ui5-serve to serve my application:

info server:custom-middleware:ui5-tooling-transpile-middleware Create Babel configuration based on ui5.yaml configuration options...
info server:custom-middleware:ui5-tooling-transpile-middleware Using browserslist configuration from ui5.yaml...
LiveReload is waiting for a browser to connect...

I do not see my expected dependencies in the resources directory and I don't see a thirdparty directory. This results in a runtime error in my application as it cannot find the dependencies.

With my build configuration, I see my dependencies being copied over to the thirdparty directory and it is working as expected. I'm building using ui5 build --clean-dest.

To Reproduce
My Ui5.yaml configuration, I'm using :

specVersion: "3.0"
type: application
framework:
  name: SAPUI5
  version: "1.120.19"
...
builder:
  customTasks:
    - name: ui5-tooling-transpile-task
      afterTask: replaceVersion
      configuration: &cfgTranspile
        debug: true
    - name: ui5-tooling-modules-task
      afterTask: ui5-tooling-transpile-task
      configuration: &cfgModule
        debug: true
        addToNamespace: true
server:
  customMiddleware:
    - name: ui5-tooling-transpile-middleware
      afterMiddleware: compression
      configuration: *cfgTranspile
    - name: ui5-tooling-modules-middleware
      afterMiddleware: ui5-tooling-transpile-middleware
      configuration: *cfgModule
    - name: ui5-middleware-livereload
      afterMiddleware: compression
      configuration:
        debug: true
        extraExts: "xml,json,properties"
        port: 35729
        path: "cfIdpAdmin"

(I've tried various different configurations and middleware orders as well)

Use ui5 serve --config ui5.yaml to serve the application. Try to access a resource that requires a third party dependency, in my case I'm importing qunit and sinon and using them in the test directory.

Expected error:

Uncaught ModuleError: Failed to resolve dependencies of 'unit/unitTests.qunit.js'
 -> 'qunit.js': failed to load 'qunit.js' from https://sapui5.hana.ondemand.com/1.120.13/resources/qunit.js: 404

Expected behavior
The application loads the 3rd party dependency from the thirdparty directory when using ui5-serve to serve the application.

Desktop:

• OS: MacOS 14
• Browser: Chrome
• Version 128.0.6613.86
• SAP UI5 version: 1.120.19

npm packages:

• ui5/cli: 4.0.6
• ui5-tooling-modules: 3.11.0
• ui5-tooling-transpile: 3.5.0
• ui5-middleware-livereload: 3.1.0

Additional context
I'm using TypeScript for my application (version 5.5.4)

[petermuessig]

Hi @Sajantoor ,

the reason for that behavior is how the UI5 runtime resolves the dependencies. When using UI5 from CDN by default all resources are resolved relative to the CDN bootstrap location, e.g. if you boot from https://ui5.sap.com/resources/sap-ui-core.js the base url for all resources/dependencies is: https://ui5.sap.com/resources/. The addToNamespace option is rewriting the dependencies (in JavaScript/TypeScript and XML files) so that they are prepended with the namespace of the application, e.g. qunit becomes my/app/ns/thirdparty/qunit. During the development using the UI5 server and loading the resources locally via /resources/sap-ui-core.js, the ui5-tooling-modules-middleware intercepts all requests to /resources/* and lookups the dependencies from the npm packages and serves them via that URL. But this is not working in CDN scenarios.

Where exactly is the dependency used? From the error log above, I assume in the unit/unitTests.qunit.js, right? Can you maybe share the code of this file here, how you load the dependencies?

By default the unitTests.qunit.js looks like that:
https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/showcases/ui5-app/webapp/test/unit/unitTests.qunit.js

And QUnit and Sinon is imported in the HTML page:
https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/showcases/ui5-app/webapp/test/unit/unitTests.qunit.html#L17

If you want to use a different QUnit or Sinon version this may be the better place to require them. AFAIK, we do not have an example for this scenario. But then this works differently and you need to add a proper mapping for that. It would be more ideal to work together on your code or to create a small example for that on which we can demonstrate how this could work. WDYT? Can you share your code or create a small example for this to work on?

THX and BR, Peter

[menof36go]

I think I am experiencing the same issue. I load SAPUI5 from a custom CDN location. The ui5Loader then adds that CDN as base path to mUrlPrefixes, which causes requests for my NPM modules to go to a CDN url instead.
For example

//TestController.js
sap.ui.define(["lodash/lodash"], function (lodash) {}

fails with

"failed to load 'lodash/lodash.js' from https:/my.secret.cdn/sapui5/1.108.5/resources/lodash/lodash.js: 404 - Not Found"

Proper fix to this issue will hopefully be with release of 5.0 (see SAP/ui5-tooling#976) with CDN proxy

[petermuessig]

Hmm, well - partially yes, but as a kind of a side effect. Once UI5 is loaded from localhost:resources/*, then as a side effect lodash will be loaded from localhost:resources/lodash.

Another option would be the feature like described in #1049 to also use the addToNamespace option for the middleware case - in general, the latest version of the plugin now uses addToNamespace by default for the built code, but not during development. And in case of developing and using CDN this issue here can appear.