Skip to Content
1
Aug 13 at 07:02 AM

UI5 Project Shims not working

634 Views Last edit Sep 02 at 12:39 PM 4 rev

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