How to include a JS library from URL in project dependencies?

[benjyt]

I have a project that should use a custom JavaScript library that my company provides. This library lies on a Jenkins server and can successfully be installed via NPM on my local machine. However, even when adding the library to the package.json and manifest.json, the library can't get loaded.

As it seems impossible to use external repositories with the ui5.yaml file, I am using the package.json file, as described in this Github Issue. My package.json file looks as follows, see our custom library in the last line:

{
    "name": "pars-web",
    "version": "1.0.0",
    "description": "PARS",
    "scripts": {
        ...    },
    "devDependencies": {
          "@ui5/cli": "^3.3.4"},
    "ui5": {
          "dependencies": {
                 "@openui5/sap.ui.core": "^1.75.0",
                 "@openui5/sap.ui.layout": "^1.75.0",
                 "@openui5/sap.f": "^1.75.0",
                 "@openui5/sap.m": "^1.75.0",
                 "@openui5/themelib_sap_horizon": "^1.75.0"
          }
    },
    "dependencies": {
          "@company/my.company.library": "https://some.net/repository/npm/my.company.library-12.4.tgz"
   }
}

I then include this library in the manifest.json file:

"sap.ui5": {
    "rootView": {
        ....
     },
     "dependencies": {
      "minUI5Version": "1.118.0",
      "libs": {
           "sap.ui.core": {},
           "sap.m": {},
           "sap.f": {},
           "sap.ui.layout": {},
            "my.company.library": {}
      }
}

Finally, my index.html file looks as follows:

<script

id="sap-ui-bootstrap"

src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

data-sap-ui-resourceroots='{

"my.name.project": "./"

}'

data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"

data-sap-ui-async="true"

data-sap-ui-theme="sap_horizon"

data-sap-ui-compatVersion="edge"

data-sap-ui-frameOptions="trusted"

data-sap-ui-xx-waitForTheme="true"

data-sap-ui-xx-supportedLanguages="en,de"

></script>

When I execute the application, the console prints the following error:

I erased the name in the picture, but in this example this is the name of my/company/library. So the problem is that the library is searched at the wrong url, so this approach is not going to work.

Do you have any ideas how I could include this external dependency?

[WouterLemaire]

In this example app we use mobx as a js library: https://github.com/ui5-community/hacking-away-sampleapp/blob/main/packages/ui/package.json

Adding it as a dependency in combination with ui5-tooling-modules does the trick.

[benjyt]

Thank you really much for the repo! This will help me to figure that out. One follow-up question: Where is this library fetched from in the package.json?

@local/library

Is there a URL to a remote repository somewhere specified or do we need to set a registry with the URL on our local npm installation? Also, is library just a simple JavaScript file?

Thank you really much for helping me figure this out.