Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Build and run simple QML on Webassembly



  • Hello everyone.
    I am trying to run a simple QML on the web browser. Next some info:
    Qt version: 5.14 (build from source wasm-emscripten)
    emsdk version: 1.38.27

    The simple QML build successfully. However, when I try to run it:

    $ emrun *.html
    

    I am getting the following error on the broswer: (I am not sure how to attach my files to this thread)

    Qt for WebAssembly: myQML01
    Application exit (TypeError: eventHandler.target is null)
    

    13fc76bb-1c62-486e-b474-fa9681df3857-image.png



  • I am not sure how to attach a file, but next is the source:
    [pro file]

    QT += quick
    CONFIG += c++11
    DEFINES += QT_DEPRECATED_WARNINGS
    SOURCES += \
            main.cpp
    
    RESOURCES += qml.qrc
    QML_IMPORT_PATH =
    QML_DESIGNER_IMPORT_PATH =
    # Default rules for deployment.
    qnx: target.path = /tmp/$${TARGET}/bin
    else: unix:!android: target.path = /opt/$${TARGET}/bin
    !isEmpty(target.path): INSTALLS += target
    

    [main.cpp]

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        const QUrl url(QStringLiteral("qrc:/main.qml"));
        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();
    }
    

    [main.qml]

    import QtQuick 2.13
    import QtQuick.Window 2.13
    
    Window
    {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello Webassembly")
    
        Rectangle
        {
            width: parent.width / 4
            height: parent.height / 4
            anchors.centerIn: parent
            color: "lightblue"
        }
    }
    


  • Unfortunately, we mistakenly applied a change to 5.14 that should not have been. It's revert is currently in the 5.14.2 branch as 3a6d8df5219653b043bd642668cee193f563ec84

    https://codereview.qt-project.org/c/qt/qtbase/+/295372



  • @lorn-potter Thanks for the update! does the 5.14.2 still works with emsdk 1.38.27? do you know if it can work with a newer version of the emsdk?



  • It will work with emsdk 1.38.27, and most likely up to 1.38.x series, but not the 1.39.x series.



  • @lorn-potter Great, thank you!
    I will build 5.14.2 with emsdk 1.38.27 and see how it goes :)



  • @lorn-potter It's working... Woohoo, thanks! Now it builds. I just built simple QML :)


Log in to reply