Standalone build with UI5 tooling: does not start from `index.html` (console errors)
sz3lbi opened this issue · 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="{
"com.company.appname": "./"
}" 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="{"id" : "com.company.appname"}" 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
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?
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?
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.
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 :)