third party libs do not load properly

[nimble-123]

Hi there,

i tried using your starter kit with third party libraries. Unfortunately some are working and some are not.

I placed the lib source files into a sub folder called lib and declared the libs in manifest.json descriptor.

"sap.ui5": {
  "resources": {
    "js": [
      {
        "uri": "lib/jszip.js"
      },
      {
        "uri": "lib/moment.js"
      }
    ]
  }
}

The JSZip lib loads as expected and i get access to the libs global name in every controller of my app but the moment.js lib throws an error like

Uncaught (in promise) Error: failed to load 'io/nlsltz/thirdpartytest/lib/moment.js' from webapp/lib/moment.js: TypeError: Cannot set property 'moment' of undefined
    at g (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:162118)
    at Object.sap.ui.requireSync (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:171780)
    at constructor.loadIncludes (http://localhost:3000/undefined/sap/ui/core/Manifest.js?eval:1:2930)
    at constructor.init (http://localhost:3000/undefined/sap/ui/core/Manifest.js?eval:1:4222)
    at i.s.init (http://localhost:3000/undefined/sap/ui/core/ComponentMetadata.js?eval:1:2085)
    at n.g._initCompositeSupport (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:8105)
    at eval (http://localhost:3000/undefined/sap/ui/base/ManagedObject.js?eval:1:2754)
    at n.constructor (http://localhost:3000/undefined/sap/ui/base/ManagedObject.js?eval:1:2864)
    at n.constructor (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:6649)
    at n.constructor (http://localhost:3000/undefined/sap/ui/core/UIComponent.js?eval:1:443)
    at n [as constructor] (http://localhost:3000/undefined/sap/ui/base/Metadata.js?eval:1:3621)
    at new s (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:1737)
    at a (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:19976)
    at eval (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:20940)
    at c (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:1102)
    at eval (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:20920)
    at <anonymous>
Caused by: TypeError: Cannot set property 'moment' of undefined
    at eval (http://localhost:3000/webapp/lib/moment.js?eval:6:203)
    at eval (http://localhost:3000/webapp/lib/moment.js?eval:7:2)
    at eval (<anonymous>)
    at w (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:162770)
    at x (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:163613)
    at g (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:162073)
    at Object.sap.ui.requireSync (http://localhost:3000/ui5/1.44.19/sap-ui-core.js:2:171780)
    at constructor.loadIncludes (http://localhost:3000/undefined/sap/ui/core/Manifest.js?eval:1:2930)
    at constructor.init (http://localhost:3000/undefined/sap/ui/core/Manifest.js?eval:1:4222)
    at i.s.init (http://localhost:3000/undefined/sap/ui/core/ComponentMetadata.js?eval:1:2085)
    at n.g._initCompositeSupport (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:8105)
    at eval (http://localhost:3000/undefined/sap/ui/base/ManagedObject.js?eval:1:2754)
    at n.constructor (http://localhost:3000/undefined/sap/ui/base/ManagedObject.js?eval:1:2864)
    at n.constructor (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:6649)
    at n.constructor (http://localhost:3000/undefined/sap/ui/core/UIComponent.js?eval:1:443)
    at n [as constructor] (http://localhost:3000/undefined/sap/ui/base/Metadata.js?eval:1:3621)
    at new s (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:1737)
    at a (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:19976)
    at eval (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:20940)
    at c (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:1102)
    at eval (http://localhost:3000/undefined/sap/ui/core/Component.js?eval:1:20920)
    at <anonymous>

I tried the same thing with WebIDE and the provided master/detail template and everythings works as expected. This is why i am asking here and not in the SAP forum.

Could i be missing some config i have to do due to the custom folder and file structure in your starter kit compared to the master/detail template inside the WebIDE?

Any help or hint in the right direction would be nice :)

[fuchsvomwalde]

Hi nlsltz,

thanks for your question. I’ll hope to look in to it the next days and to give you an update asap. The info that it is working in the Web IDE is a good hint. My current assumption is that the moment.js is being touched by babel or maybe an uglify task that is causing the error in the moment.js file, but that’s not more than a first guess.

Kind regards.

[fuchsvomwalde]

Hi nlsltz,

It took a while, but I can now offer you a solution to your problem. I have chosen a generic approach to add third party libraries to the project. Instead of manually downloading libraries and integrating them via manifest.json, you can now go the standard way via npm: For example, add moment.js via yarn add moment to the dependencies of your project and the dependencies will (depend on the settings in package .json > main.vendor) made available to the UI5 project. You can find an exemplary sample usage in the Main.controller.

The advantages are quite clear, that you can easily obtain third party libraries via the npm ecosystem (including auto-update etc. pp.).

Best regards, Jascha