How to make the node_modules folder accessible during the build process of a ui5 themelib?

[#1]

Hi SAP Community,

I want to build an open UI5 theme-library using the ui5 tooling (CLI). This is normally no problem, but I want to build it using an other UI5 theme-library which I installed via npm and which resided in the node_modules directory.

During the build process after executing

ui5 build --config ui/ui5.yaml 

I get the error message, that the .less file from the node_modules directory can't be found:

> Error Message: Could not find file at path
> '/resources/node_modules/@my-company/imported-ui-themelib/dist/resources/sap/ui/core/themes/mytheme/library.source.less' 

I tried to include the file this way:

@import "../../../../../node_modules/@my-company/imported-ui-themelib/dist/resources/sap/ui/core/themes/mytheme/library.source.less";

in a library.source.less file which is located in the directory:

ui/themelib-custom/src/sap/ui/core/themes/mythemecustom/library.source.less

The .less file in the node_modules directory is installed and I copied the relative path to make sure there are no typos. But somehow the runtime of the build process does not include the node_modules folder to be accessible. Can anyone help? How can i make the node_modules folder accessible during the build process of my ui5 themelib? Maybe somehow in the ui5.yaml config file? Would be very thankful for any help!

Thanks in advance

Florian

[FlorianVogt]

Hi Florian,

yes you have to add the theme-library as a dependency in your themelib-custom ui5.yaml.

[FlorianVogt]

Maybe you could isolate your project and put your files on a github repo. This would be easier to get a detailed look on it.

[former_member608651]

Hi Florian,

okay, so this i definitely a problem then. But how can I add my imported library to my themelib-custom ui5.yaml?

This is how it looks at the moment without the dependency:

---
specVersion: '2.1'
type: theme-library
metadata:
  name: themelib_mycompany_custom
  copyright: Copyright
resources:
  configuration:
    propertiesFileSourceEncoding: "UTF-8"
    paths:
      src: ui/themelib-mycompany-custom/src
framework:
  name: OpenUI5    
  version: 1.71.22
  libraries:
    - name: sap.f
    - name: sap.m
    - name: sap.tnt
    - name: sap.ui.core
    - name: sap.ui.dt
    - name: sap.ui.fl
    - name: sap.ui.layout
    - name: sap.ui.suite
    - name: sap.ui.table
    - name: sap.ui.unified
    - name: sap.uxap
    - name: themelib_sap_fiori_3

I can't add it to the framework libraries, because then its pulled via the @openui5 public repo. And I did not found anything appropriate in the ui5 tooling documentation available for theme-libraries. So how can i achieve this exactly?

Many thanks!

Florian

[FlorianVogt]

Hi Florian,

sorry. I was wrong. Non UI5 framework libraries should not be maintained in the consuming ui5.yaml files. They have to be added exclusively in package.json in the dependency section. However, every theme-lib has to have a ui5.yaml included. If so, these theme-libraries are detected by the UI5 tooling and served.
Could you execute "ui5 tree --json --full > deps.json" in your project and check if the parent theme-library is listed there?

[former_member608651]

Hi Florian,

I executed your command, but the parent theme-library is not present there, although I have it in the package.json dependecies and it is also present in the node_modules directory

What else can I try?

Best regards

Florian

[merlin_beutlberger]

Ok, this means the UI5 Tooling fails to detect the dependency.

Some additional things to check now:

1. In your consuming project's package.json, is your theme library listed in "dependencies" or "devDependencies"?
2. In the same package.json do you have a "ui5"."dependencies" configuration as mentioned in some extensions (like https://www.npmjs.com/package/ui5-middleware-livereload#usage)? If yes, make sure "@my-company/imported-ui-themelib" is also listed there.
3. Is that package.json file located next to the ui5.yaml in the "ui" directory? Or is it located in the directory where you execute the build command? It will only be read correctly in case of the latter.

[former_member608651]

Many thanks Merlin! That solved my problem. I mapped the src path in the ui5.yaml of the parent themelib. There it worked fine. But when I imported it, this led to a wrong mapping in the internal ui5 directory structure. So i removed this src mapping now in the parent themelib and now it works fine.

Thanks to both of you merlin.beutlberger and florian.vogt for the quick and very helpful responses!

[FlorianVogt]

Hi Florian,
could you please share the ui5.yaml file of the @my-company/imported-ui-themelib?

The tooling will take care of registering the sources correctly, so your import statment should look like @import "/resources/sap/ui/core/themes/mytheme/library.source.less".

[former_member608651]

Hi Florian,

thanks for your quick response! At the moment I added my imported theme-library only as a dependency in the package.json file of my theme-library project. Do I additionally need to add it somehow to the ui5.yaml of the theme-library in which i want to reuse my imported theme-library?

Here comes the ui5.yaml of my imported theme-library:

specVersion: '2.1'
metadata:
  name: themelib_mycompany
  copyright: Copyright
type: theme-library
resources:
  configuration:
    propertiesFileSourceEncoding: "UTF-8"
    paths:
      src: ui/themelib/src
framework:
  name: OpenUI5    
  version: 1.71.19
  libraries:
    - name: sap.f
    - name: sap.m
    - name: sap.tnt
    - name: sap.ui.core
    - name: sap.ui.dt
    - name: sap.ui.fl
    - name: sap.ui.layout
    - name: sap.ui.suite
    - name: sap.ui.table
    - name: sap.ui.unified
    - name: sap.uxap
    - name: themelib_sap_fiori_3
server:
  customMiddleware:
    - name: ui5-middleware-livereload
      afterMiddleware: compression
      configuration:
        debug: true
        port: 35729
        watchPath: ui/themelib/src
        path: ui/themelib/src/demo
builder:
  resources:
    excludes:
      - "/resources/demo/**"

I changed the path in the @import statement now as you mentioned it. But i still get the error:

Could not find file at path '/resources/sap/ui/core/themes/mytheme/library.source.less'

Thanks in advance and best regards

Florian