QtWebEngine import not found in QML

[stephencomputer]

I am attempting to package my Qt app as a flatpak. It relies heavily on QtWebEngine, so I used this base app.

I am using qt6 with org.kde.Sdk and org.kde.Platform. It packages successfully but then I get this error immediately when the app opens: module “QtWebEngine” plugin “qtwebenginequickplugin” not found.

The line in question is simply “import QtWebEngine” (QML).

[stephencomputer]

Here is the manifest:

app-id: ca.stevestudios.Swirl
runtime: org.kde.Platform
runtime-version: ‘6.5’
sdk: org.kde.Sdk
base: io.qt.qtwebengine.BaseApp
base-version: ‘6.5’
command: swirl
finish-args:

    –share=ipc
    –socket=x11
    –socket=wayland
    –filesystem=host
    –device=dri
    –env=QTWEBENGINEPROCESS_PATH=/app/bin/QtWebEngineProcess
    cleanup-commands:
    /app/cleanup-BaseApp.sh
    modules:
    name: swirl
    buildsystem: simple
    build-commands:
        install -D ca.stevestudios.Swirl.appdata.xml /app/share/metainfo/ca.stevestudios.Swirl.appdata.xml
        install -D ca.stevestudios.Swirl.desktop /app/share/applications/ca.stevestudios.Swirl.desktop
        install -D ca.stevestudios.Swirl.svg /app/share/icons/hicolor/scalable/apps/ca.stevestudios.Swirl.svg
        install -D ca.stevestudios.Swirl-symbolic.svg /app/share/icons/hicolor/symbolic/apps/ca.stevestudios.Swirl-symbolic.svg
        sources:
        type: file
        path: ca.stevestudios.Swirl.desktop
        type: file
        path: ca.stevestudios.Swirl.svg
        type: file
        path: ca.stevestudios.Swirl-symbolic.svg
        type: file
        path: ca.stevestudios.Swirl.appdata.xml
    name: swirl-bin
    buildsystem: cmake-ninja
    config-opts:
        -DCMAKE_BUILD_TYPE=Release
        sources:
        type: archive
        path: swirl-bin.tar.gz

[bbhtt]

path: swirl-bin.tar.gz

Where is this file? Where is the source code? You shouldn't use path sources like that, use urls.

[bbhtt]

Ok I figured out the issue, the qml files are ending up in /app/qml instead of /app/lib/qml for the QtPdf, QtWebengine and QtWebview module. It can be easily reproduced with:

flatpak run --command=sh --devel --socket=x11 --device=dri --env=QTWEBENGINEPROCESS_PATH=/app/bin/QtWebEngineProcess --filesystem=$(pwd) io.qt.qtwebengine.BaseApp//6.6
[📦 io.qt.qtwebengine.BaseApp ~]$ qml BrowserDialog.qml
Failed to create wl_display (No such file or directory)
qt.qpa.plugin: Could not load the Qt platform plugin "wayland" in "" even though it was found.
Gtk-Message: 21:43:36.607: Failed to load module "canberra-gtk-module"
Gtk-Message: 21:43:36.607: Failed to load module "pk-gtk-module"
Gtk-Message: 21:43:36.608: Failed to load module "canberra-gtk-module"
Gtk-Message: 21:43:36.608: Failed to load module "pk-gtk-module"
Qt: Session management error: Could not open network socket
QQmlApplicationEngine failed to load component
file:///home/wirt/BrowserDialog.qml:5:1: module "QtWebEngine" is not installed
qml: Did not load any objects, exiting.

where BrowserDialog.qml is the example webview dialogue here https://github.com/qt/qtwebengine/blob/dev/examples/webenginequick/quicknanobrowser/BrowserDialog.qml

file:///home/wirt/BrowserDialog.qml:5:1: module "QtWebEngine" is not installed <- is the important bit.

[bbhtt]

Actually nevermind, you just need to set QML_IMPORT_PATH=/app/qml as an environment variable to make it work.

In SDK the path is /usr/qml so it makes sense that in the baseapp it is placed under /app/qml

I'll add it to the wiki.

[bbhtt]

https://github.com/flathub/io.qt.qtwebengine.BaseApp/wiki#qml Since you didn't provide the code for your application, I'm unable to verify if it fixed your issue.

I'm closing this as solved as it solves the issue in the title, please reopen if it didn't.

Thanks!

[bbhtt]

Noticed now that the SDK sets the path to /app/lib/qml at least for QML2 https://invent.kde.org/packaging/flatpak-kde-runtime/-/blob/50157931dffe94d138ca76f30f5216389b03c7da/org.kde.Sdk.json.in#L82

What makes sense here? cc @tsdgeos

[tsdgeos]

I've no idea, what is installing things to /app/lib/qml and what is installing things to /app/qml and why do they disagree?

[bbhtt]

I've no idea, what is installing things to /app/lib/qml and what is installing things to /app/qml and why do they disagree?

QtPdf, QtWebengine and QtWebview qml modules are being installed to /app/qml. I think that makes sense since in SDK the path is /usr/qml.

The prefix here is /usr so correspondingly it is changed to /app in baseapps or applications.

But the SDK sets the import path to /app/lib/qml via QML2_IMPORT_PATH which seems wrong.

If you "fix" the import path from SDK, it works again:

flatpak run --command=sh --devel --socket=x11 --device=dri --env=QTWEBENGINEPROCESS_PATH=/app/bin/QtWebEngineProcess --filesystem=$(pwd) --env=QML2_IMPORT_PATH= --env=QML2_IMPORT_PATH=/app/qml io.qt.qtwebengine.BaseApp//6.6

[📦 io.qt.qtwebengine.BaseApp ~]$ qml BrowserDialog.qml

My question is should they go in /app/lib/qml, or stay in /app/qml or the SDK should change the import path?

[bbhtt]

QML modules are installed as per qmldir by Qt, the default value of that is ARCHDATADIR/qml, ARCHDATADIR defaults to PREFIX if not set. Hence in SDK it goes to /usr/qml and correspondingly in applications /app/qml because nothing is set.

You can see distributions like Fedora, Debian set archdatadir eg. https://sources.debian.org/src/qt6-base/6.4.2%2Bdfsg-19/debian/rules/#L42, https://src.fedoraproject.org/rpms/qt6-qtbase/blob/rawhide/f/qt6-qtbase.spec#_401

In that case this line is wrong https://invent.kde.org/packaging/flatpak-kde-runtime/-/blob/50157931dffe94d138ca76f30f5216389b03c7da/org.kde.Sdk.json.in#L82

[bbhtt]

Looks like the line came from this commit https://invent.kde.org/packaging/flatpak-kde-runtime/-/commit/f40674d08a8e3e84f0d3248a2809e615c0484591 which copied https://invent.kde.org/packaging/flatpak-kde-runtime/-/commit/7b3f17019080821f625bf8c8639a1383ae02e35b.

If you look at qtbase in 5.15lts or < 5.15 branches, archdatadir is set to /usr/lib, so qml modules ends up in /usr/lib/qml for the SDK and /app/lib/qml.

But archdatadir was removed for the Qt 6.2 branches https://invent.kde.org/packaging/flatpak-kde-runtime/-/commit/cae9a01049cd35431fc7f6c0dc392d734fba4751#690bc0d0f6af4fceb5c446ab3fd551aa6ca3502f_143_120 so they (at least the ones coming from Qt) now end up in /usr/qml and /app/qml while the env var wasn't removed/changed.

KDE uses KDE_INSTALL_QMLDIR which seems to default to the same path as Qt https://github.com/KDE/extra-cmake-modules/blob/410515a239a3f851b2c063bca334f3ce80e7e9f1/kde-modules/KDEInstallDirs6.cmake#L210

Applications 1,2 are already depending on /app/qml, I guess the easy way out is to append that to QML2_IMPORT_PATH in the SDK for branches 6.6 and 6.5.