QT5.7.1 cannot load websites built on react.js

Vbrg

I am using QT5.7.1 webkit for displaying Web Page developed in React.js (React version 18.3.1 and Node version 22.0.0) on connected HMI through linuxfb. But Getting blank white page.

Below is my simple code

#include <QApplication>
#include <QMainWindow>
#include <QWebView>
#include <QUrl>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // Create the main window
    QMainWindow mainWindow;
    mainWindow.setGeometry(0, 0, 1280, 800);  // Set position and size

    // Add a web view
    QWebView* webView = new QWebView(&mainWindow);
    webView->setGeometry(0, 0, 1280, 800);
    webView->load(QUrl("http://localhost:3000/react"));  // Load the URL
    mainWindow.show();  // Show the main window
    return app.exec();
}

Setting below ENV's:

export QT_QPA_PLATFORM=linuxfb
export LD_LIBRARY_PATH=/usr/local/qt5.7.1/lib
export QT_PLUGIN_PATH=/usr/local/qt5.7.1/plugins
export QTDIR=/usr/local/qt5.7.1

Below is platform Details:

Debian 11
ARMv7 32-bit

If any help would be appreciated.

SGaist

Hi and welcome to devnet,

The first thing to do would be to update Qt. 5.7.1 has reached end of life a long time ago. Also, that outdated WebKit version is likely too old to support the modern JavaScript stuff.

Vbrg

Actually, we recently updated our web page, which was originally built with Angular 1, to a new design using React.js (ES6) and CSS. We considered using Qt6.4.2 WebEngine to display this React-based page within our application, but we're facing performance issues. Specifically, the WebEngine is consuming an unusually high amount of CPU resources (around 200%), and this is occurring because we do not have hardware acceleration (GPU).

Given that we are exclusively looking to use Qt (no external browsers or additional setups), we want to explore if there is a way to render our React.js web page without relying on WebEngine, while keeping the rest of the functionality within Qt.

Is there any other approach or alternative Qt component that would allow us to display a modern web page (React.js and CSS) efficiently, without running into the high resource consumption issues associated with WebEngine?

Thanks in advance for any insights!

JonB

@Vbrg
Did you test your page in Chrome browser, quite outside of Qt/webengine?
Did you test with a release build of your code/Qt libraries? QtWebEngine is known to be slow in debug builds.

J.Hilk

Personally I would consider this a feature 🤣

Vbrg

@JonB
Yes, we tested the page in both Chrome and other browsers. In Chrome, the CPU usage was similar to what we observed with Qt WebEngine — relatively high. Interestingly, when testing with a lightweight browser like Surf, the performance was noticeably better, with approximately 50% lower CPU utilization compared to Chrome. However, with Surf, the CPU utilization still fluctuated between 100% to 150%, which is still high for my system.

As for our Qt setup, we installed Qt 6.4.2 using the system package manager, so it should be the release build.

JonB

@Vbrg So in a word Qt only offers integrated browser with chromium/Qt web engine.