Uncaught TypeError: Fragment.load is not a function

The code below has been copied from UI5 Demo Kit but while I run it, the console is showing the error message that the function Fragment.load is not a function. Please suggest any alternative or highlight issue if any.

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator",
  "sap/ui/model/json/JSONModel",
  "sap/m/MessageToast",
  "sap/ui/core/Fragment"
], function(Controller, MessageToast, Filter, FilterOperator, JSONModel, Fragment) {
  "use strict";

  return Controller.extend("Workspace.controller.HelloPanel", {
    onInit: function() {
      var plant = {
        pid: "",
        ptype: "",
        pdesc: "",
        psite: "",
        pstatus: "",
        passigned: "",
        pattach: ""
      };
      var oModel1 = new JSONModel(plant);
      this.getView().setModel(oModel1, "SUP");
    },

    onOpenDialog: function() {
      var oView = this.getView();
      if (!this.byId("helloDialog")) {
        Fragment.load({
          id: oView.getId(),
          name: "Workspace.view.HelloDialog",
          controller: this
        }).then(function(oDialog) {
          // connect dialog to the root view of this component (models, lifecycle)
          oView.addDependent(oDialog);
          oDialog.open();
        });
      } else {
        this.byId("helloDialog").open();
      }
    },

    onCloseDialog: function() {
      this.byId("helloDialog").close();
    },

  });
});

Solution

Reason 1: mismatch of dependencies and callback parameters

When calling sap.ui.define or sap.ui.require, you need to ensure that the declared dependencies and the callback parameters are listed in the same order:

sap.ui.define([ // list of dependencies
  "sap/ui/core/mvc/Controller", // 1st
  "sap/m/MessageToast", // 2nd
  // ...
], function (Controller/*1st*/, MessageToast/*2nd, ...*/) {
  // ...
});

In the question above, for example, we can see that "sap/m/MessageToast" is accidentally required twice, resulting in a mismatch with the list of callback parameters. Remove the 2nd "sap/m/MessageToast" from the dependency list. Otherwise, you're trying to call .load() from the MessageToast, hence the error.

Reason 2: the method was introduced in later versions

If you're getting the same error, despite having the correct dependency order, keep in mind that UI5 introduced Fragment.load first in 1.58.

To see which UI5 version the app is actually running with, press Ctrl+Shift+Left Alt+P.

💡 Recommendation

If the application's target UI5 version is 1.93 or higher, favor the built-in Controller API loadFragment over calling Fragment.load: https://stackoverflow.com/a/64541325/5846045