Qt6 QML QQmlApplicationEngine failed to load component error - qml

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()
}
}
}