Standalone build with UI5 tooling: does not start from `index.html` (console errors)

Question

Standalone build with UI5 tooling: does not start from `index.html` (console errors)

sz3lbi opened this issue 10 months ago · 4 comments

Hi,
I'm coming here from this StackOverflow question. I've taken a look at the UI5 Tooling dependencies, as mentioned in the answer there. It has helped quite a bit, as the build process itself looks much better, with no errors that used to show up. However the application still does not launch as expected.

This is what the UI5 Tooling dependencies look like now:

PS C:\Users\username\appname> npx ui5 build self-contained --include-all-dependencies --config=ui5.yaml --clean-dest --dest dist --verbose >output_stdout.txt 2>output_stderr.txt  
PS C:\Users\username\appname> npx ui5 ls --flat --config=ui5.yaml
info graph:helpers:ui5Framework Using SAPUI5 version: 1.108.24
warn graph:helpers:ui5Framework Dependency sap.ui.mdc is restricted for use by SAP internal projects only! If the project com.company.appname is an SAP internal project, add the attribute "allowSapInternal: true" to its metadata configuration
Dependencies (36):
├─ com.company.appname com/company/appname (1.0.0, application) C:\Users\username\appname
├─ sap.f sap/f (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.f\1.108.21
├─ sap.m sap/m (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.m\1.108.21
├─ sap.suite.ui.generic.template sap/suite/ui/generic/template (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.suite.ui.generic.template\1.108.21
├─ sap.tnt sap/tnt (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.tnt\1.108.21
├─ sap.ui.comp sap/ui/comp (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.comp\1.108.21
├─ sap.ui.core sap/ui/core (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.core\1.108.21
├─ sap.ui.dt sap/ui/dt (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.dt\1.108.21
├─ sap.ui.generic.app sap/ui/generic/app (1.108.0, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.generic.app\1.108.0
├─ sap.ui.integration sap/ui/integration (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.integration\1.108.21
├─ sap.ui.layout sap/ui/layout (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.layout\1.108.21
├─ sap.ui.mdc sap/ui/mdc (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.mdc\1.108.21
├─ sap.ui.support sap/ui/support (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.support\1.108.21
├─ sap.ui.table sap/ui/table (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.table\1.108.21
├─ sap.ushell sap/ushell (1.108.24, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ushell\1.108.24
├─ themelib_sap_horizon (1.108.21, theme-library) C:\Users\username\.ui5\framework\packages\@openui5\themelib_sap_horizon\1.108.21
├─ sap.ui.unified sap/ui/unified (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.unified\1.108.21
├─ sap.ui.rta sap/ui/rta (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.rta\1.108.21
├─ sap.fe.placeholder sap/fe/placeholder (1.108.17, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.fe.placeholder\1.108.17
├─ sap.insights sap/insights (1.108.9, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.insights\1.108.9
├─ sap.ui.fl sap/ui/fl (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.fl\1.108.21
├─ sap.viz sap/viz (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.viz\1.108.21
├─ sap.suite.ui.microchart sap/suite/ui/microchart (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.suite.ui.microchart\1.108.21
├─ sap.uxap sap/uxap (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.uxap\1.108.21
├─ sap.chart sap/chart (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.chart\1.108.21
├─ sap.fe.navigation sap/fe/navigation (1.108.17, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.fe.navigation\1.108.17
├─ sap.ui.codeeditor sap/ui/codeeditor (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.codeeditor\1.108.21
├─ sap.esh.search.ui sap/esh/search/ui (1.108.4, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.esh.search.ui\1.108.4
├─ sap.collaboration sap/collaboration (1.108.0, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.collaboration\1.108.0
├─ sap.ui.export sap/ui/export (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.export\1.108.21
├─ sap.suite.ui.commons sap/suite/ui/commons (1.108.9, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.suite.ui.commons\1.108.9
├─ sap.ui.commons sap/ui/commons (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.commons\1.108.21
├─ sap.ui.ux3 sap/ui/ux3 (1.108.21, library) C:\Users\username\.ui5\framework\packages\@openui5\sap.ui.ux3\1.108.21
├─ sap.ui.vk sap/ui/vk (1.108.3, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.vk\1.108.3
├─ sap.ui.vbm sap/ui/vbm (1.108.4, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.vbm\1.108.4
╰─ sap.ui.richtexteditor sap/ui/richtexteditor (1.108.21, library) C:\Users\username\.ui5\framework\packages\@sapui5\sap.ui.richtexteditor\1.108.21

Extensions (12):
├─ sap-fe-mockserver (2.1.123, server-middleware) C:\Users\username\appname\node_modules\@sap-ux\ui5-middleware-fe-mockserver
├─ fiori-tools-appreload (1.11.2, server-middleware) C:\Users\username\appname\node_modules\@sap\ux-ui5-tooling
├─ fiori-tools-proxy (1.11.2, server-middleware) C:\Users\username\appname\node_modules\@sap\ux-ui5-tooling
├─ fiori-tools-preview (1.11.2, server-middleware) C:\Users\username\appname\node_modules\@sap\ux-ui5-tooling
├─ fiori-tools-servestatic (1.11.2, server-middleware) C:\Users\username\appname\node_modules\@sap\ux-ui5-tooling
├─ deploy-to-abap (1.11.2, task) C:\Users\username\appname\node_modules\@sap\ux-ui5-tooling
├─ ui5-task-flatten-library (0.2.5, task) C:\Users\username\appname\node_modules\ui5-task-flatten-library
├─ ui5-tooling-modules-middleware (3.2.2, server-middleware) C:\Users\username\appname\node_modules\ui5-tooling-modules
├─ ui5-tooling-modules-task (3.2.2, task) C:\Users\username\appname\node_modules\ui5-tooling-modules
├─ ui5-tooling-transpile-middleware (3.2.7, server-middleware) C:\Users\username\appname\node_modules\ui5-tooling-transpile
├─ ui5-tooling-transpile-task (3.2.7, task) C:\Users\username\appname\node_modules\ui5-tooling-transpile
╰─ preview-middleware (0.5.7, server-middleware) C:\Users\username\appname\node_modules\@sap-ux\preview-middleware

Structure of the resources directory in the built project: https://gist.github.com/sz3lbi/77039c9ec59c7ed7159f500ee1bdeb7f

The error that appears in the browser console:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ca-gregorian')

The the first few lines of the generated sap-ui-custom.js:

//@ui5-bundle sap-ui-custom-dbg.js
//@ui5-bundle-raw-include ui5loader.js
/*!
 * OpenUI5
 * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
 * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
 */

/*
 * IMPORTANT NOTICE
 * With 1.54, ui5loader.js and its new features are not yet a public API.
 * The loader must only be used via the well-known and documented UI5 APIs
 * such as sap.ui.define, sap.ui.require, etc.
 * Any direct usage of ui5loader.js or its features is not supported and
 * might break in future releases.
 */

/*global sap:true, Blob, console, document, Promise, URL, XMLHttpRequest */

(function(__global) {
	"use strict";
	if ( __global.Promise === undefined || !__global.Promise.prototype.finally || __global.URLSearchParams === undefined ) {
		var page = document.documentElement, pageStyle = page.style,
			msg = "Microsoft Internet Explorer 11 and other legacy browsers are no longer supported. For more information, see ",
			hrefText = "Internet Explorer 11 will no longer be supported by various SAP UI technologies in newer releases",
			href = "https://blogs.sap.com/2021/02/02/internet-explorer-11-will-no-longer-be-supported-by-various-sap-ui-technologies-in-newer-releases/";

		page.innerHTML = '<body style="margin:0;padding:0;overflow-y:hidden;background-color:#f7f7f7;text-align:center;width:100%;position:absolute;top:50%;transform:translate(0,-50%);"><div style="color:#32363a;font-family:Arial,Helvetica,sans-serif;font-size:.875rem;">' +
			msg + '<a href="' + href + '" style="color:#4076b4;">' + hrefText + '</a>.</div></body>';
		pageStyle.margin = pageStyle.padding = "0";
		pageStyle.width = pageStyle.height = "100%";
		if (__global.stop) { // Check for __global.stop first because Safari 11 has __global.stop and document.execCommand but document.execCommand('Stop') does not work in Safari 11
			__global.stop();
		} else {
			document.execCommand('Stop');
		}
		throw new Error(msg + href);
	}
}(window));

(function(__global) {
	"use strict";

	/*
	 * Helper function that removes any query and/or hash parts from the given URL.
	 *
	 * @param {string} href URL to remove query and hash from
	 * @returns {string}
	 */
	function pathOnly(href) {
		var p = href.search(/[?#]/);
		return p < 0 ? href : href.slice(0, p);
	}
	// ...

ui5.yaml:

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json

specVersion: "3.1"
metadata:
  name: com.company.appname
type: application
framework:
  name: SAPUI5
  version: 1.108.24
  libraries:
    - name: sap.f
    - name: sap.m
    - name: sap.suite.ui.generic.template
    - name: sap.tnt
    - name: sap.ui.comp
    - name: sap.ui.core
    - name: sap.ui.dt
    - name: sap.ui.generic.app
    - name: sap.ui.integration
    - name: sap.ui.layout
    - name: sap.ui.mdc
    - name: sap.ui.support
    - name: sap.ui.table
    - name: sap.ushell
    - name: themelib_sap_horizon
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
        backend:
          - path: /sap
            url: XXX
            client: "100"
            destination: E01_100
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
        delay: 300
    - name: ui5-tooling-transpile-middleware
      afterMiddleware: compression
      configuration:
        debug: true
        excludePatterns:
          - /Component-preload.js
    - name: fiori-tools-preview
      afterMiddleware: fiori-tools-appreload
      configuration:
        component: com.company.appname
        ui5Theme: sap_horizon
    - name: ui5-tooling-modules-middleware
      afterMiddleware: ui5-tooling-transpile-middleware
builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
    - name: ui5-tooling-transpile-task
      afterTask: replaceVersion
      configuration:
        debug: true

index.html:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>XYZ</title>
    <style>
        html, body, body > div, #container, #container-uiarea {
            height: 100%;
        }
    </style>
    <script id="sap-ui-bootstrap" src="resources/sap-ui-custom.js" data-sap-ui-theme="sap_horizon" data-sap-ui-resourceroots="{
            &quot;com.company.appname&quot;: &quot;./&quot;
        }" data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatversion="edge" data-sap-ui-async="true" data-sap-ui-frameoptions="trusted"></script>
</head>
<body class="sapUiBody sapUiSizeCompact" id="content">
    <div data-sap-ui-component="" data-name="com.company.appname" data-id="container" data-settings="{&quot;id&quot; : &quot;com.company.appname&quot;}" data-handle-validation="true"></div>

</body></html>

Expected Behavior

Working SAPUI5 application.

Current Behavior

SAPUI5 application gets built properly, but does not work when started.

Steps to Reproduce the Issue

Create a SAPUI5 application.
Build the application with the following command: npx ui5 build self-contained --include-all-dependencies --config=ui5.yaml --clean-dest --dest dist
Run the built version of the application.

Context

UI5 Module Version (output of ui5 --version when using the CLI): 3.7.0
Node.js Version: 18.18.0
npm Version: 10.2.0
OS/Platform: WIndows 10
Browser (if relevant): Microsoft Edge 119.0.2151.44
Other information regarding your environment (optional): nothing

Log Output / Stack Trace

https://gist.github.com/sz3lbi/a24ea5c8f12a02b9680a976de28ba3b6

Answer 1 · 2023-11-09T12:54:09.000Z

Hi @sz3lbi ,

Without the project itslef it would be hard to judge and debug.
Form the browser's console error, it seems that the issue starts from the application's main controller.
Can you provide URL to the repo or a sample app where the issue is reproducible?

Answer 2 · 2023-11-09T14:17:04.000Z

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ca-gregorian')

Indeed this would be easier to analyze with a reproducible example since this might be a UI5 runtime related issue.

The error might indicate a failing request. Are there any other console errors? Are there any failed network requests?

Also, what server do you use to serve the build result?

Answer 3 · 2024-01-08T20:02:56.000Z

This issue has been automatically marked as stale because it has been open for 60 days with no activity. It will be closed in 10 days if no further activity occurs.

Answer 4 · 2024-01-19T07:38:37.000Z

Hi again,
Sorry for not answering for so long. However, I was able to solve the problem and the comment from @RandomByte helped a lot as it suggested that the HTTP server might be a problem here.
It looks like that was the problem, not sure if it was in the server's config or something else, but installing serve instead and running the standalone app with it helped.
Thanks :)