Struggling to Import Module

[bluesanta]

I am following the book "Learn Qt 5" by Nicholas Sherrif.

At this point I am not able to progress past Chapter 4 in the book as I am not able to properly create a new module and activate it in Qt Creator.

My issue is similar to another topic posted in 2021. However, that post did not help to resolve my issue.

In the tutorial, we create a new resource file called assets.qrc and place it within the root of our project folder. My assets.qrc file is as follows:

<RCC>
    <qresource prefix="/assets">
        <file alias="qmldir">assets/qmldir</file>
        <file alias="Style.qml">assets/Style.qml</file>
    </qresource>
</RCC>

We create the file Style.qml as follows:

pragma Singleton
import QtQuick 2.9

Item {
    readonly property color colourBackground: "#3e8eab"
}

We create the qmldir file as follows:

module assets
singleton Style 1.0 Style.qml

At this point, this should be the entirety of the module, but we need to import it.

My project cm-ui.pro file is as follows

QT += qml quick

TEMPLATE = app

CONFIG += c++17

include(../qmake-target-platform.pri)
include(../qmake-destination-path.pri)

INCLUDEPATH += source/ \
    ../cm-lib/source

SOURCES += \
    source/main.cpp

RESOURCES += views.qrc \
    assets.qrc \

# Additional import path used to resolve QML modules in Qt Creator's core model
QML_IMPORT_PATH = $$PWD

LIBS += -L$$PWD/../../shadow-builds/cm-lib/binaries/linux/gcc/x86/debug -lcm-lib

DESTDIR = $$PWD/../../shadow-builds/cm-ui/binaries/$$DESTINATION_PATH
OBJECTS_DIR = $$PWD/build/$$DESTINATION_PATH/.obj
MOC_DIR = $$PWD/build/$$DESTINATION_PATH/.moc
RCC_DIR = $$PWD/build/$$DESTINATION_PATH/.qrc
UI_DIR = $$PWD/build/$$DESTINATION_PATH/.ui

In the above file, I see that the RESOURCES var contains assets.qrc, and the QML_IMPORT_PATH var contains the working directory.

We still need to pass the import path to the engine. Here is my main.cpp file:

#include <QQmlApplicationEngine>
#include <QGuiApplication>
#include <QQmlContext>

#include <controllers/master-controller.h>

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    qmlRegisterType<cm::controllers::MasterController>("CM", 1, 0, "MasterController");
    qmlRegisterType<cm::controllers::NavigationController>("CM", 1, 0, "NavigationController");

    cm::controllers::MasterController masterController;

    QQmlApplicationEngine engine;
    engine.addImportPath("qrc:/");
    engine.rootContext()->setContextProperty("masterController", &masterController);
    engine.load(QUrl(QStringLiteral("qrc:/views/MasterView.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

The line engine.addImportPath("qrc:/") should get the engine to the root folder. The qmldir file's module name indicates the relative dir, and since we've imported the assets.qrc file, I believe the engine should be able to find the module.

However, when I go to apply the module in any view, I run into issues.

For example, here is my DashboardView.qml file:

import QtQuick 2.9
import assets 1.0

Item {
    Rectangle {
        anchors.fill: parent
        color: Style.backgroundColour

        Text {
            id: textHere
            anchors.centerIn: parent
            text: "Dashboard View"
        }
    }
}

The import assets 1.0 line has the error message QML module not found. When I hover over the line with the mouse, I can see that the root of my cm-ui project is listed as an import path. But the connection between the assets folder and its qmldir file is not achieved.

If I try to run the app anyway, as the previous post on this issue suggests, the app will run, but will not import the Style.backgroundColour var.

Can anyone please help me find out what I'm doing wrong? Thank you.

One other note is that I'm using Qt 6, not 5, and I'm using c++17 instead of c++14.

[bluesanta]

Update:

I continued on through the tutorial book and it seems that some aspect of the module import is working. However, there does still seem to be a problem, which is isolated currently only to the property of passing color.

In the tutorial, the next we add font awesome webfonts and they are successfully passed through to the application.

Here is my updated assets.qrc file:

<RCC>
    <qresource prefix="/assets">
        <file alias="qmldir">assets/qmldir</file>
        <file alias="Style.qml">assets/Style.qml</file>
        <file alias="fontawesome.ttf">assets/fontawesome-webfont.ttf</file>
    </qresource>
</RCC>

Here is my updated Style.qml file:

pragma Singleton
import QtQuick 2.9

Item {
    property alias fontAwesome: fontAwesomeLoader.name
    readonly property color colourBackground: "#3e8eab"

    FontLoader {
        id: fontAwesomeLoader
        source: "qrc:/assets/fontawesome.ttf"
    }
}

Here is my updated MasterView.qml file:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

import assets 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Client Management")

    Component.onCompleted: contentFrame.replace("qrc:/views/DashboardView.qml")

    Connections {
        target: masterController.ui_navigationController
        onGoCreateClientView: contentFrame.replace("qrc:/views/CreateClientView.qml")
        onGoDashboardView: contentFrame.replace("qrc:/views/DashboardView.qml")
        onGoEditClientView: contentFrame.replace("qrc:/views/EditClientView.qml", {selectedClient: client})
        onGoFindClientView: contentFrame.replace("qrc:/views/FindClientView.qml")
    }

    Rectangle {
        id: navigationBar
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
        }
        width: 100
        color: "#000000"

        Column {
            Text {
                font {
                    family: Style.fontAwesome
                    pixelSize: 42
                }
                color: "#ffffff"
                text: "\uf0c9"
            }
            Text {
                font {
                    family: Style.fontAwesome
                    pixelSize: 42
                }
                color: "#ffffff"
                text: "\uf015"
            }
            Text {
                font {
                    family: Style.fontAwesome
                    pixelSize: 42
                }
                color: "#ffffff"
                text: "\uf234"
            }
            Text {
                font {
                    family: Style.fontAwesome
                    pixelSize: 42
                }
                color: "#ffffff"
                text: "\uf002"
            }
        }
    }

    StackView {
        id: contentFrame
        anchors {
            top:parent.top
            bottom: parent.bottom
            right: parent.right
            left: navigationBar.right
        }
        initialItem: "qrc:/views/SplashView.qml"
        clip: true
    }
}

The icons in the MasterView.qml file successfully load in the navigation bar on the left, therefore I assume that the module is loading, despite the warning.

However, the color is not properly transferring from the module to the app browser. I'm not sure why, seems like it should be a much easier fix.

[bluesanta]

So, it's entirely working now.

There was a simple typo in the files, colourBackground <-> backgroundColour, that caused some confusion. Otherwise, everything seems to work just fine.

Is there any way to get rid of the warning, though? That would be nice.

[bluesanta]

Apparently, there is a way.

Quit and reboot Qt.

However, now I'm having an issue with the next module in the tutorial series. This one's issue does not match the ones above. Hmm...