UI5 Project Shims not working

[camichel]

Good morning together,

I want to use some npm packages in my sap ui5 app...and actually I facing some issues with the load of the resources in the controller...
I did everything like described in the blog article (Project Shims – Using NPM modules with UI5 | SAP Blogs) about shims... but i always get an error while loading...

Here are my files:

controller:

sap.ui.define([
    "sap/ui/core/mvc/Controller", 
    "thirdparty/lodash/lodash", 
    "thirdparty/moment/moment"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, lodash, moment) {
        "use strict";

        return Controller.extend("mdao.magentadaoext.controller.View1", {
            onInit: function () {
                var test = moment().format('MMM Do YYY');
                console.log(test);

            }
        });
    });

package.json

    },
    "ui5": {
        "dependencies": [
            "@sap/ux-ui5-tooling",
            "@sap/ui5-builder-webide-extension",
            "ui5-task-zipper",
            "mbt",
            "lodash",
            "moment"
        ]
    },
    "dependencies": {
        "lodash": "^4.17.21",
        "moment": "^2.29.1"
    }
}

UI5.yaml

---
specVersion: '2.5'
kind: extension
type: project-shim
metadata:
  name: thirdparty # this can be your project shim name
shims:
  configurations:
    lodash: # name as defined in package.json
      specVersion: "2.5"
      type: module # Use module type
      metadata:
        name: lodash
      resources:
        configuration:
          paths:
            /resources/thirdparty/lodash/: ''  # location where modules are stored
    moment: # name as defined in package.json
      specVersion: "2.5"
      type: module # Use module type
      metadata:
        name: moment
      resources:
        configuration:
          paths:
            /resources/thirdparty/moment/: ''  # location where modules are stored

Console Log:

Log-dbg.js:452 2021-08-12 16:13:04.481500 failed to load JavaScript resource: thirdparty/lodash/lodash.js -  sap.ui.ModuleSystem

ui5loader-dbg.js:1039 Uncaught (in promise) ModuleError: Failed to resolve dependencies of 'mdao/project1/controller/View1.controller.js'
 -> 'thirdparty/lodash/lodash.js': failed to load 'thirdparty/lodash/lodash.js' from /resources/thirdparty/lodash/lodash.js: script load error
    at p1 (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:53:213)
    at j1.failWith (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:40:43)
    at https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:65:1556
Caused by: ModuleError: failed to load 'thirdparty/lodash/lodash.js' from /resources/thirdparty/lodash/lodash.js: script load error
    at p1 (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:53:213)
    at j1.failWith (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:40:43)
    at HTMLScriptElement.p (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:60:468)
Caused by: Error: script load error
    at HTMLScriptElement.p (https://workspaces-ws-gbgbv-app2.eu20.applicationstudio.cloud.sap/resources/sap-ui-core.js:60:510)

I also changed the src in the index.html from cdn to "resources/sap-ui-core.js"

Any ideas what I am doing wrong?

TIA

Carsten

[vobu]

for the record: after some investigation, it turns out the fiori-tools-proxy middleware is incompatible with the ui5 module shimming (see https://twitter.com/vobu/status/1433013956789088259?s=21)

in ui5.yaml:

server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
# ...
      ui5:
        path: 
        - /resources # <-- meeeeh - this is what overwrites the ui5 tooling shim
        - /test-resources
        url: https://ui5.sap.com
        version:  # The UI5 version, for instance, 1.78.1. Empty means latest version

but the shimming capability requires `resources` not to be generically proxied, as it relies on a subdir of `resources` to make the npm module available at runtime:

specVersion: '2.1'
kind: extension
type: project-shim
metadata:
  name: thirdparty # this can be your project shim name
shims:
  configurations:
    lodash: # name as defined in package.json
      specVersion: '2.1'
      type: module # Use module type
      metadata:
        name: lodash
      resources:
        configuration:
          paths:
            /resources/thirdparty/lodash/: ''  # <--- bzzzt, meh

So, what to do now?

Totally subjective:

- for all Backend connectivity and dev-time: ditch fiori-tools-proxy and use ui5-middleware-simpleproxy https://www.npmjs.com/package/ui5-middleware-simpleproxy

- move to the standard ui5 tooling for serving and thus make npm module shimming possible:

$> ui5 use OpenUI5@latest
$> ui5 add sap.ui.core sap.m sap.ui.layout themelib_sap_fiori_3
$> ui5 serve

hth, v.

[_jonas_]

You could change the middleware config:

ui5:
  path:
    - /resources/sap*

This way only sap resources are proxied.

[vobu]

jonas.zuberbuehler woah, that's the solution! I just tried it out on camichel example and can confirm that the wildcard `/resources/sap*` works.

i feel...tremedously schmocked 😛

[richard-bruenni]

Do you know how many hours I tried to solves this! Thank you!

ui5:
        path: 
        - /resources/sap*

[klaus_keller]

We are working on a fix for @sap/ux-ui5-middleware module to be compatible with Project Shims, see discussion at https://github.com/SAP/open-ux-tools/issues/79

[richard-bruenni]

thx was really ugly when working with 3rd party libs

[vobu]

Hi,

config for dev time LGTM.

-> might be related to how you consume UI5 in index.html: try changing CDN consumption...

<script
            id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

to local/UI5-tooling consumption:

<script
            id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"

HTH, V.