SAP UI5 + Yarn = does not run

Info: NPM has the same problem

I want to create a UI5 project but UI5 should be imported using NPM or Yarn. I downloaded example from Walkthrough, step 12: https://sapui5.hana.ondemand.com/#/topic/4df1d914e52d4b1aa0805eb01522537e

and installed Yarn. File package.json is already present in the demo and command yarn install (and also npm install) downloaded everything into node_modules. Then I changed the src-attribute in index.html like this:

src="../node_modules/@openui5/sap.ui.core/src/sap-ui-core.js"

But when I run index.html it does nothing. For example this error is shown:

Failed to load component for container container. Reason: Error: failed to load 'sap/m/library.js' from ../node_modules/@openui5/sap.ui.core/src/sap/m/library.js: script load error.

... folder "m" does not exist ...

Also library.js is searched in non-existing folder: node_modules/@openui5/sap.ui.core/src/sap/ui/core/themes/sap_belize/library.css ... folder sap_belize is missing.

When I use the default UI5-src things work:

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

Many people mention that ui5-src should look like this:

src="resources/sap-ui-core.js"

... but such a folder does not exist so it cannot work.

Is there something I am missing? I was expecting this would work immediately but I have spent with it 4 hours now... Thanks.

Edit: Things work perfectly when I download whole UI5 from https://openui5.org/releases/ ... but NPM and Yarn have different folder structure so I added following data-sap-ui-resourceroots, and now it seems that UI5 is working somehow, but still the theme is missing ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="../node_modules/@openui5/sap.ui.core/src/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./",
            "sap.m": "../node_modules/@openui5/sap.m/src/sap/m",
            "sap.base": "../node_modules/@openui5/sap.ui.core/src/sap/base",
            "sap.ui": "../node_modules/@openui5/sap.ui.core/src/sap/ui",
            "sap.ui.layout": "../node_modules/@openui5/sap.ui.layout/src/sap/ui/layout",
            "sap.ui.unified": "../node_modules/@openui5/sap.ui.unified/src/sap/ui/unified",
            "sap.m.themes": "../node_modules/@openui5/themelib_sap_belize/src/sap/m/themes"
            
        }'
            data-sap-ui-theme-roots='{
              "sap_belize": "../node_modules/@openui5/themelib_sap_belize/src/"
            }'
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
    </script>
</head>
<body class="sapUiBody" id="content">
    <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>

My current error says that some non-existing file is required:

Could not load theme parameters from:

file:///C:/_my/sap.m.tutorial.walkthrough.12/node_modules/@openui5/themelib_sap_b>elize/src/sap/ui/core/themes/sap_belize/library-parameters.json
- NetworkError: Failed to execute 'send' on 'XMLHttpRequest':
Failed to load 
'file:///C:/_my/sap.m.tutorial.walkthrough.12/node_modules/@openui5/themelib_sap_belize/src/sap/ui/core/themes/sap_belize/library-parameters.json'.

Solution

Your question is already answered by the UI5 documentation, see App Development Using OpenUI5, section "App Development Using OpenUI5".

Basically, all UI5 samples and tutorials assume that there's a UI5-aware middleware that * maps all UI5 libraries into a single hierarchy * map the root of that hierarchy into the root of the app, using a virtual path named resources/.

The ui5-tooling, which is open source, provides such a middleware out of the box. SAP's proprietary servers that offer UI5 support (e.g. NetWeaver ABAP, NetWeaver Java, ...) include similar middlewares.

If you don't want to use such a middleware, then either additional configuration is needed (as you did with the resource- and theme-roots) or you need to copy all files together into a structure suitable for your needs.

The recommended way however is the one sketched above.