How to resolve the error: "The target [...] no viewName defined"? - sapui5

Question

I'm pretty new in SAPUI5 and started to learn the subject on Routing and navigation as you can see in their documentation:
https://ui5.sap.com/#/topic/e5200ee755f344c8aef8efcbab3308fb
Now I did all the changes like they do in their documentation but I have an error that I don't understand why it is being thrown:
The target overview no viewName defined. - EventProvider sap.m.routing.Target
Here is the manifest:
{
"...": "...",
"sap.ui5": {
"_version": "1.1.0",
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"dependencies": {
"minUI5Version": "1.60",
"libs": {
"sap.m": {}
}
},
"...": "...",
"rootView": {
"viewName": "sap.ui.startApp.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"type": "View",
"viewType": "XML",
"path": "sap.ui.startApp.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [
{
"pattern": "",
"name": "overview",
"target": "overview"
},
{
"pattern": "detail",
"name": "detail",
"target": "detail"
}
],
"targets": {
"overview": {
"id": "overview",
"name": "Overview"
},
"detail": {
"id": "detail",
"name": "Detail"
}
}
}
}
}

Answer 1

Solution
Either add "async": true to /sap.ui5/routing/config/ in manifest.json
Or preferably add "sap.ui.core.IAsyncContentCreation" to the application's UIComponent:
sap.ui.define([
"sap/ui/core/UIComponent",
// ...
], function(UIComponent/*,...*/) {
"use strict";
return UIComponent.extend("my.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation", // Available since 1.89.0
],
manifest: "json",
},
// ...
});
});
Analysis
The /sap.ui5/routing/targets properties viewName, viewId, viewPath, and viewLevel are regarded as legacy syntax since UI5 1.58.0 (as part of the initiative to support routing with nested components) and thus it is correct to declare name, id, path, and level respectively instead of viewName, etc.. *
The error "[...] no viewName defined" actually comes from sap/ui/core/routing/sync/Target.js. The /sync part indicates that the views are created synchronously which should be avoided because it's blocking the UI thread of the browser during the routing process. Instead, targets should be created asynchronously which, however, requires an additional flag as shown above.
If the targets are created asynchronously, the error will be gone.
* In case existing apps still need to migrate to the new name, id, path, and level syntax:
Add:
"type": "View" to /sap.ui5/routing/config/ (Cf. commit: ef476f1)
"minUI5Version": "1.98.0" or higher to /sap.ui5/dependencies/ (Cf. commit: 867496d)
The property /sap.ui5/rootView/viewName is not affected.
Related discussion: https://github.com/SAP/openui5/issues/3417