QQmlApplicationEngine failed to load component : "Type" is not a type

Question

I'm having trouble loading one qml through another.

Basically, I have created a qml type MyTabView in MyTabView.qml:

import QtQuick 2.3
import QtQuick.Controls 1.2

TabView {
    width: 360
    height: 360

    Component.onCompleted: {
        addTab("Tab 1", tab1)
  
        addTab("Tab 2", tab2)
    }

    Component {
        id: tab1
        Rectangle {color: "red"}
    }

    Component {
        id: tab2
        Rectangle {color: "blue"}
    }
}

and I am trying to use it in another qml file (main.qml), which is in the same directory:

import QtQuick 2.3
import QtQuick.Controls 1.2
import "."

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Main")

    MyTabView {}
}

but when I try to run my project, I get this error:

QQmlApplicationEngine failed to load component qrc:/qml/main.qml:11 TabView is not a type

Notes:

• I have M Caps in MyTabView.qml and it's in the same directory as main.qml.

• When I replace all the code of MyTabView.qml instead of MyTabView {} inside main.qml, the program does not give any error and runs correctly.

What am I doing wrong and how to fix it ?

Flabellum

You have called your own class TabView whilst using Qt's TabView simultaneously. Change your class name (in QML the class name is the name of the QML definition file). – Flem

I have changed the name of my xml file to MyTabView.xml and is calling MyTabView{} in the main.xml but i get the same error MyTabView is not a type – Flabellum

Answer 1

Have you added the file to your Resources ?
Adding your MyTabView.qml to your project in the same directory of main.qml is not sufficient.
You have to put your QML file in the Resources (probably main.qrc/qml/) in order to have it deployed.
The editor of Qt Creator does not need this inclusion in order to find your type, therefore it displays no error.

Loireatlantique

Thank you! This is not writen in any of the examples delivered by Qt! This solved my case. – Zuleika

@A.Ocannaille you should consider accepting this answer if it solved your problem. – Hohenlinden

@MartinDelille You're right ;-) But I'm not the poster :) I already have upvoted the answer – Zuleika

Sorry @A.Ocannaille! I wanted to speak to @bourne! :-) – Hohenlinden

I'm mystified as to why Qt Creator puts QML files in a special "QML" folder, but doesn't add them to Resources as required. – Steady

I would say this is a bug, why won't QT Creator put it in Resources folder right away?! =( – Bravura

Answer 2

I had a similar problem.

qrc:AGview.qml:8:15: AGraph is not a type

I solved it: my original code (in my main.cpp):

view.setSource(QUrl("qrc:AGview.qml"));

the working one:

view.setSource(QUrl("qrc:/AGview.qml"));

I think without the slash it don't search in the actual folder.

Munch

I had the same problem. Does anyone know an explanation for this? – Adrien

I don't think(!) the slash has anything to do with the folder structure and rather with the prefixes you set in the qrc file. But the default prefix is just "/". So as long as you don't add another prefix, it should give you the same result as if it is about a folder structure, – Amatol

Answer 3

You should rename your "TabView.qml" to something like "MyTabView.qml".

Because of that import

import "."

you have conflict of TabView from "QtQuick.Controls 1.2" and local folder "."

Galwegian

I have changed the name of my xml file to MyTabView.xml and is calling MyTabView{} in the main.xml but i get the same error MyTabView is not a type – Flabellum

@Flabellum Why do you use "xml" extension for your source files? There is nothing similar between qml and xml. – Galwegian

Answer 4

This error can also be caused by a component's having an error. For instance, I had this sequence of errors:

QQmlApplicationEngine failed to load component
qrc:/main.qml:6 Type MainView unavailable
qrc:/MainView.qml:27 Type ApplicationLocked unavailable
qrc:/ApplicationLocked.qml:4 MetaStateChart is not a type

It's not very clear, bu the error in MainView is caused by a problem in ApplicationLocked. When I fixed that error, everything else worked.

So contrary to the conventional wisdom of starting with the first compiler error, it may be necessary to start with the last one!

Onions

Answer 5

Ok I have had this problem recently with QT 6.2 and QML. Using both CMake and QMake as the build systems.

The solution is to add the QML file e.g. MyTabView.qml to the resources file and make sure it is added to the CMakeLists.txt or the project file (should be done automatically for you).

Then in the top of your main.qml or wherever you are using this custom component import qrc:/. Assuming the custom qml file was added under the prefix / and therefore its resource path will be qrc:/MyTabView.qml.

Trapan

Answer 6

For Qt 6.4 Rob Sanders solution worked for me.

1. Add the executable to your CMakeLists.txt

    set(CMAKE_AUTORCC ON)
    qt_add_executable(app015_custom_elements
        main.cpp
        resources.qrc
        MyButton.qml
    )
   

2. import it like import "qrc:/qml" (change the /qml to wherever your qml file lie)

Then you can use it. In my case

MyButton{}

Kilowatthour

Answer 7

If you have tried all the solutions mentioned by others but they don't work, you can try this one:

#  (in cmakelists)
qt_add_qml_module(appNewapp
    URI Newapp
    VERSION 1.0
    QML_FILES Main.qml
    YourQML.qml
)

This works for Qt6.4

Decelerate