<Component> is not defined in SAPUI5

Question

I tried to set up UI5 development on my local machine follow this turoial. The general setup seems to be fine, but when I add a button and want to let it show a MessageToast or a MessageBox (since I've read that MessageToast is deprecated) it does not work. The Button is showed, but when I click on it I get the following issues:

• In Edge Developer Tools: "MessageToast is not defined" (same with MessageBox)
• In Console: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Here is my coding: View:

<mvc:View controllerName="testproject.controller.Test123"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
            <Button id="test" text="Press Button" press="onClick"/>
        </content>
    </Page>
</mvc:View>

Controller:

    sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/m/MessageBox"
    ],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("testproject.controller.Test123", {
            onInit: function () {

            },
            onClick: function() {
                //MessageToast.show("Test");
                MessageBox.information("Test2");
            }
        });
    });

I tried this via VS-Code and since I could not be sure if my setup is wrong I used the trial instance of the BAS. So if you want to reproduce it, just generate a freestyle UI5 project via BAS (or VS-Code) and then basically just add the button and the code of the controller. I've done nothing more.

I am running on UI5 version 1.48.0, have chosen no data source (would have added it manually later, since I just wanted to test first) and thats it. maybe you can tell me what I am missing (I programmed UI5 in the past and this was basically also more or less my hello world, but I can't get my head around what is wrong this time)

Answer 1

You import 3 dependencies here

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/m/MessageBox"
],

but only 1 of them (the first) will be accessible because you didn't add them to the method signature here

function (Controller) {

So just add the other dependencies to your signature

function (Controller, MessageToast, MessageBox) {