Qt6 QML QQmlApplicationEngine failed to load component error

Question

I want to use component in QtQuick, i have two qml files one is main.qml and the second button.qml, and iam using this example for their documentation, but when i run my code it is giving me error that QQmlApplicationEngine failed to load component qrc:/bbb/main.qml:13:5: Button is not a type. also iam seeing some red error in the imported Button in main.qml.

main.qml

import QtQuick

    Window {
        id:root
         width: 640
         height: 480
         visible: true
         title: qsTr("Hello World")
    
    
        Button { // our Button component
            id: button
            x: 12; y: 12
            text: "Start"
            onClicked: {
                status.text = "Button clicked!"
            }
        }
    
        Text { // text changes when button was clicked
            id: status
            x: 12; y: 76
            width: 116; height: 26
            text: "waiting ..."
            horizontalAlignment: Text.AlignHCenter
        }
    
    }

Button.qml

import QtQuick 2.0

Item {
    Rectangle {
        id: root
        // export button properties
        property alias text: label.text
        signal clicked

        width: 116; height: 26
        color: "lightsteelblue"
        border.color: "slategrey"

        Text {
            id: label
            anchors.centerIn: parent
            text: "Start"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.clicked()
            }
        }
    }

}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>


int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/bbb/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Answer 1

It seems your logging is somewhat truncated. Normally in this case (for me that is Qt5.11), that error is followed by the invalid property name 'text' that is visible in the designer, which is the real problem here.

You should keep in mind that signals and property are only visible/usable from the outside (so in your main.qml) if they are declared on the top most element in Button.qml. It seems you can simply remove the Item wrapping to make it work

Button.qml: import QtQuick 2.0

Rectangle {
    id: root
    // export button properties
    property alias text: label.text
    signal clicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}