Required module is undefined. How do I detect cyclic dependencies in UI5?

Given:

sap.ui.define([ // in my/ModuleA.js
  // "...",
  "./ModuleB",
], function (/*...,*/ModuleB) {
  // ...             ModuleB is undefined here
  return/*...*/;
});

sap.ui.define([ // in my/ModuleB.js
  // "...",
  "./ModuleA"
], function (/*...,*/ModuleA) {
  // ...             ModuleA is undefined here
  return/*...*/;
});

After building and running the application, inspecting the generated Component-preload.js shows that the ModuleB parameter in my/ModuleA.js or the ModuleA parameter in my/ModuleB.js is undefined.

It's easy to detect such cyclic dependencies in a small project. But how can I detect such flaws easily if there are multiple modules and their dependencies are complex?

Solution

There are mainly two typical causes of the undefined module value:

1. Core not ready

The module is being accessed before the framework is fully initialized, i.e. Core#isInitialized returns false or the Promise from Core.ready hasn't resolved yet. For example, if a control library still needs to register shims for its third-party libs, the third-party export value is undefined at that moment.

Make sure that you access modules only after the core initialization is complete, either through the function assigned to data-sap-ui-onInit or after Core.ready has been fully resolved.

See the documentation Initialization Process or Bootstrapping: Loading and Initializing.

2. Cycle dependencies

To identify cycle dependencies in your project:

Open the browser console and make sure to enable viewing all "Verbose" logs.
Run the application with the following UI5 config parameter sap-ui-xx-debugModuleLoading with the value true.
In the log, filter by "cycle detected".

^{cycle detected between 'my/ModuleB.js' and 'my/ModuleA.js', returning undefined for 'my/ModuleA.js' - sap.ui.ModuleSystem}
^{cycle detected between 'my/ModuleA.js' and 'my/ModuleB.js', returning undefined for 'my/ModuleB.js' - sap.ui.ModuleSystem}

And since e7daa82 (UI5 1.121), an actual error is logged with the message:

^{Dependency cycle detected: [...] sap.ui.ModuleSystem.}

In UI5 library development

Initializing your library with the API initLibrary from the required "sap/ui/core/Core" module is allowed only since UI5 1.91 (commit: d83868e). In lower UI5 versions, the "sap/ui/core/Core" module might resolve to undefined if required early during the bootstrap process due to a cyclic dependency.

Resolution

Double-check if the dependency to the ModuleA or ModuleB is really necessary in the module definition itself. If it's not used, remove the dependency from the list.
Follow the Best Practices for Loading Modules and its child topics from the documentation.

Related Q&A on resolving the error "Modules that use an anonymous define() call must be loaded with a require() call".