Module defined in qmldir is said to be not installed

Question

The following was done in accordance to docs.
My project structure (simplified):

./
│
├── qml/
│   ├── misc/
│   │   ├── SplashScreen.qml
│   │   └── qmldir
│   │
│   ├── main/
│   │   ├── Main.qml
│   │   └── qmldir
│   │
│   └ qmldir

qmldir under qml/ folder

module qml

qmldir under qml/misc/ folder:

module qml.misc
SplashScreen 1.0 SplashScreen.qml

qmldir under qml/main/ folder:

module qml.main

resources.qrc:

<!DOCTYPE RCC><RCC version="1.0">
    <qresource>
        <file alias="main">qml/main/Main.qml</file>
        <file>qml/main/qmldir</file>
    </qresource>
    <qresource prefix="/qml">
        <file>qmldir</file>
    </qresource>
</RCC>

then I add qml path to engine Paths in main.py:

path = "C:/Users/Bob/Repos/TestApp/qml"
self.engine.addImportPath(QUrl.fromLocalFile(path).toString())
print(self.engine.importPathList())  # I make sure it's there at the beginning
...
self.engine.load(QUrl("qrc:/main"))

and finally, I import the SplashScreen in Main.qml:

import QtCore
import QtQuick
import qml.misc

ERROR: qrc:/main:3:1: module "qml.misc" is not installed

What am I doing wrong?

//edit
fixed by editing and manually typing in all file paths in resources.qrc, I was sure I'd have to list only qmldir files but since adding all .qml files there the error has disappeared.

Answer 1

Here are the modules first. The most important thing to pay attention to here is that they have the folder name. Subfolders are expanded with a .. For example: qml folder. If this is expanded, the sub folder must be added at the end. qml.main . Of course this is just an example.

module qml.main
Main 1.0 Main.qml

The SplashScreen can be imported with import qml.misc

module qml.misc
SplashScreen 1.0 SplashScreen.qml

this qmldir imports the other two modules and can be used with import qml. (But it doesn't make sense to put the main in a module, but I'll show it here for the demo)

module qml
import qml.misc auto
import qml.main auto

so that the whole thing works. the importpath should be added. If you want to make your life easier just use this: engine.addImportPath(":/"); in this example the url is const QUrl url(QStringLiteral("qrc:/qml/main/Main.qml")); (in case anyone is interested)

<RCC>
    <qresource prefix="/">
        <file>qml/qmldir</file>
        <file>qml/main/Main.qml</file>
        <file>qml/main/qmldir</file>
        <file>qml/misc/qmldir</file>
        <file>qml/misc/SplashScreen.qml</file>
    </qresource>
</RCC>

You don't have to insert the path into the .pro itself

Here is a working example:

SplashScreen.qml

import QtQuick 2.15

Rectangle {
    width: 100
    height: 100
    color: "green"
}

Main.qml

import QtQuick
import qml.misc 1.0 // or import qml 1.0

Window {
    width: 640
    height: 480
    visible: true
    SplashScreen{
        x: 10
        y: 10
    }
    SplashScreen{
        x: 120
        y: 10
    }
}