Building Qt Apps to Wasm

DragonOsman

I want to try to building Qt for WebAssebly again since I think if I had Qt built using the latest version of Emscripten, it may not do what it's not supposed to when using that version of Emscripten. So I want to know how to have it use LLVM 10 installed through the EMSDK and have it generate LLVM bitcode targeting the wasm32 machine type (for that I probably need to know how to pass (multiple) command line arguments to the Clang compiler itself when building Qt). Also, if I want to have it use C++17 rules when building Qt, what should I do? I tried passing the -c++std c++17 argument to configure.bat but it didn't work. Internally it was still using C++11.

I hope someone will help me with that. Thanks in advance.

lorn.potter

@DragonOsman If you install emsdk latest (1.39.0), and build Qt, you can get the new wasm object file format by passing -device-option WASM_OBJECT_FILES=1 to Qt configure.

As far as the c++17 support, see this bug I just reported:
https://bugreports.qt.io/browse/QTBUG-79552

DragonOsman

Okay, but how can I pass the option to emit LLVM bitcode with machine-type wasm32? Will passing -device-option WASM_OBJECT_FILES=1 to Qt configure like you said be enough? I do want to know where to pass the --emit-llvm and --target=wasm32 flags to Clang.

Also, I heard on the Emscripten GitHub that .obj files with wasm in them aren't standard wasm files. And that Emscripten version 1.38.38 and above isn't supposed to generate it in the first place, especially with the new Wasm backend. The error I was before where wasm-ld.exe was saying that the .obj files don't have machine-type wasm32 was strange for that reason. Also because those object files all had Wasm code in them. wasm-ld.exe was also saying it about object files from the Qt library itself, though, and I don't know where to find them to check if they have Wasm code in them or not. They most likely have it as well though.

I've posted a link to the Emscripten GitHub issue I opened about this on here before. Have you looked at that? If not, then please do.

Also I've added this line to qmake.conf along with the recommended patch: QMAKE_CXXFLAGS_RELEASE += -Xclang --emit-llvm -Xclang --target=wasm32, but is that okay? Or did I make a mistake here? Also, if I add this patch to the Qt I build from source, and then I want to execute git pull, would it be okay to push my changes to the repository? Note: I'll keep the prebuilt binaries too and I try with both. Maybe I can still get this to work.

Edit: One more question: do I need the Qt Web module when targeting Wasm? The one that's takes too long and the documentation says to consider not building it.

DragonOsman

This is the error I get now when using prebuilt Qt to build the Notepad project:

wasm-ld: error: notepad.obj: machine type must be wasm32
wasm-ld: error: notepad.js_plugin_import.obj: machine type must be wasm32
wasm-ld: error: moc_notepad.obj: machine type must be wasm32
wasm-ld: error: qapplication.obj: machine type must be wasm32
wasm-ld: error: qwidget.obj: machine type must be wasm32
wasm-ld: error: qwasmlocalfileaccess.obj: machine type must be wasm32
shared:ERROR: 'C:/emsdk/upstream/bin\wasm-ld.exe -o c:\users\osman\appdata\local\temp\emscripten_temp\notepad.wasm --allow-undefined --lto-O0 main.obj notepad.obj -LC:\emsdk\upstream\emscripten\system\local\lib notepad.js_plugin_import.obj -LC:\emsdk\upstream\emscripten\system\lib moc_notepad.obj -LC:\Users\Osman\.emscripten_cache\wasm-obj C:/Qt/5.13.1/wasm_32/plugins/platforms/libqwasm.a C:/Qt/5.13.1/wasm_32/lib/libQt5EventDispatcherSupport.a C:/Qt/5.13.1/wasm_32/lib/libQt5FontDatabaseSupport.a C:/Qt/5.13.1/wasm_32/lib/libqtfreetype.a C:/Qt/5.13.1/wasm_32/lib/libQt5EglSupport.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqgif.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqicns.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqico.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqjpeg.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqtga.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqtiff.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqwbmp.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqwebp.a C:/Qt/5.13.1/wasm_32/lib/libQt5PrintSupport.a C:/Qt/5.13.1/wasm_32/lib/libQt5Widgets.a C:/Qt/5.13.1/wasm_32/lib/libQt5Gui.a C:/Qt/5.13.1/wasm_32/lib/libqtlibpng.a C:/Qt/5.13.1/wasm_32/lib/libqtharfbuzz.a C:/Qt/5.13.1/wasm_32/lib/libQt5Core.a C:/Qt/5.13.1/wasm_32/lib/libqtpcre2.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc.a C:\Users\Osman\.emscripten_cache\wasm-obj\libcompiler_rt.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc-wasm.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc++-noexcept.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc++abi-noexcept.a --whole-archive C:\Users\Osman\.emscripten_cache\wasm-obj\libembind-rtti.a --no-whole-archive C:\Users\Osman\.emscripten_cache\wasm-obj\libgl-webgl2.a C:\Users\Osman\.emscripten_cache\wasm-obj\libdlmalloc.a C:\Users\Osman\.emscripten_cache\wasm-obj\libpthread_stub.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc_rt_wasm.a --import-memory --import-table -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --export __wasm_call_ctors --export __data_end --export main --export malloc --export free --export setThrew --export __errno_location --export fflush --export _ZSt18uncaught_exceptionv --export __cxa_find_matching_catch --export __cxa_is_pointer_type --export __cxa_can_catch --export emscripten_GetProcAddress --export emscripten_webgl_make_context_current --export emscripten_webgl_get_current_context --export strstr --export emscripten_builtin_memalign --export memalign --export emscripten_builtin_free --export _get_environ --export realloc --export _get_tzname --export _get_daylight --export _get_timezone --export strlen -z stack-size=5242880 --initial-memory=16777216 --no-entry --global-base=1024' failed (1)

If I pass -device-option WASM_OBJECT_FILES=1 to Qt configure when building Qt, will that fix this?

I checked notepad.obj and notepad.js_plugin_import.obj with wasm-dis.exe before and found that they were Wasm object files. But now when I check again, main.obj does have Wasm code in it but this is what I get for notepad.obj:

[parse exception: surprising value (at 0:4)]
Fatal: error in parsing wasm binary

All three of the ones from my code give the same error. How can I find those three object files from the Qt library so I can check them too?

DragonOsman

I finally managed to build the Notepad example app to Wasm, but I don't know how to run it. I tried opening notepad.html, but that brought me to a page with the Qt logo that says:

Qt for WebAssembly: notepad 
TypeError: Body has already been read

So what should I do?

Thanks in advance for any help.

lorn.potter

You can either put the resulting .js, .wasm, .html files on a web server, or emscripten comes with emrun which will start a server and open the html file in a browser.

DragonOsman

Thanks, I'll try that.

DragonOsman

I launched Python's web server by running python -m http.server, but I get the same exact HTML page as before when I go to notepad.html. It still has that same error on it.

DragonOsman

I get the exact same result with emrun. The error "TypeError: Body has already been read". How do I fix this? Someone please help. This seems like a JavaScript error so maybe I should also consult the Emscripten developers. But it's also something related to Qt and there may be something I need to know about how to run a Wasm module compiled from Qt code.

lorn.potter

@DragonOsman said in Building Qt Apps to Wasm:

The error "TypeError: Body has already been read". How do I fix this?

I have seen that when I configure qt for threads and have forgotten to enable shared memory in the browsers.

Chrome: chrome://flags "WebAssembly threads support"
FireFox: about:config "javascript.options.shared_memory"

DragonOsman

Okay, thanks. I'll have to see how to do that for MS Edge. Thanks for the info on Chrome.

lorn.potter

@DragonOsman https://wiki.qt.io/Qt_for_WebAssembly

lorn.potter

@DragonOsman said in Building Qt Apps to Wasm:

Okay, thanks. I'll have to see how to do that for MS Edge. Thanks for the info on Chrome.

I do not think Edge has re-enabled shared memory:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

DragonOsman

I used it in Chrome. The functionality of saving a file doesn't seem to work (may need to let WebAssembly use the filesystem) and the "Select Font" feature is giving me trouble. It opens up two dialogue boxes so I have cancel the second one. On the first one then, the font size selector goes crazy when I try to use it; it keeps going between different sets of two options in really fast succession and I can't choose one at all. Is there a special way to get the Notepad example to work as a Wasm app? These problems only appear in the Wasm app.

steno

@DragonOsman said in Building Qt Apps to Wasm:

This is the error I get now when using prebuilt Qt to build the Notepad project:

wasm-ld: error: notepad.obj: machine type must be wasm32
wasm-ld: error: notepad.js_plugin_import.obj: machine type must be wasm32
wasm-ld: error: moc_notepad.obj: machine type must be wasm32
wasm-ld: error: qapplication.obj: machine type must be wasm32
wasm-ld: error: qwidget.obj: machine type must be wasm32
wasm-ld: error: qwasmlocalfileaccess.obj: machine type must be wasm32
shared:ERROR: 'C:/emsdk/upstream/bin\wasm-ld.exe -o c:\users\osman\appdata\local\temp\emscripten_temp\notepad.wasm --allow-undefined --lto-O0 main.obj notepad.obj -LC:\emsdk\upstream\emscripten\system\local\lib notepad.js_plugin_import.obj -LC:\emsdk\upstream\emscripten\system\lib moc_notepad.obj -LC:\Users\Osman\.emscripten_cache\wasm-obj C:/Qt/5.13.1/wasm_32/plugins/platforms/libqwasm.a C:/Qt/5.13.1/wasm_32/lib/libQt5EventDispatcherSupport.a C:/Qt/5.13.1/wasm_32/lib/libQt5FontDatabaseSupport.a C:/Qt/5.13.1/wasm_32/lib/libqtfreetype.a C:/Qt/5.13.1/wasm_32/lib/libQt5EglSupport.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqgif.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqicns.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqico.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqjpeg.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqtga.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqtiff.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqwbmp.a C:/Qt/5.13.1/wasm_32/plugins/imageformats/libqwebp.a C:/Qt/5.13.1/wasm_32/lib/libQt5PrintSupport.a C:/Qt/5.13.1/wasm_32/lib/libQt5Widgets.a C:/Qt/5.13.1/wasm_32/lib/libQt5Gui.a C:/Qt/5.13.1/wasm_32/lib/libqtlibpng.a C:/Qt/5.13.1/wasm_32/lib/libqtharfbuzz.a C:/Qt/5.13.1/wasm_32/lib/libQt5Core.a C:/Qt/5.13.1/wasm_32/lib/libqtpcre2.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc.a C:\Users\Osman\.emscripten_cache\wasm-obj\libcompiler_rt.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc-wasm.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc++-noexcept.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc++abi-noexcept.a --whole-archive C:\Users\Osman\.emscripten_cache\wasm-obj\libembind-rtti.a --no-whole-archive C:\Users\Osman\.emscripten_cache\wasm-obj\libgl-webgl2.a C:\Users\Osman\.emscripten_cache\wasm-obj\libdlmalloc.a C:\Users\Osman\.emscripten_cache\wasm-obj\libpthread_stub.a C:\Users\Osman\.emscripten_cache\wasm-obj\libc_rt_wasm.a --import-memory --import-table -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --export __wasm_call_ctors --export __data_end --export main --export malloc --export free --export setThrew --export __errno_location --export fflush --export _ZSt18uncaught_exceptionv --export __cxa_find_matching_catch --export __cxa_is_pointer_type --export __cxa_can_catch --export emscripten_GetProcAddress --export emscripten_webgl_make_context_current --export emscripten_webgl_get_current_context --export strstr --export emscripten_builtin_memalign --export memalign --export emscripten_builtin_free --export _get_environ --export realloc --export _get_tzname --export _get_daylight --export _get_timezone --export strlen -z stack-size=5242880 --initial-memory=16777216 --no-entry --global-base=1024' failed (1)

If I pass -device-option WASM_OBJECT_FILES=1 to Qt configure when building Qt, will that fix this?

I checked notepad.obj and notepad.js_plugin_import.obj with wasm-dis.exe before and found that they were Wasm object files. But now when I check again, main.obj does have Wasm code in it but this is what I get for notepad.obj:

[parse exception: surprising value (at 0:4)]
Fatal: error in parsing wasm binary

All three of the ones from my code give the same error. How can I find those three object files from the Qt library so I can check them too?

What was your solution for machine type must be wasm32? I have been seeing this as well.

lorn.potter

@steno said in Building Qt Apps to Wasm:

What was your solution for machine type must be wasm32? I have been seeing this as well.

If you use the prebuilt binaries, you need to use emscripten version 1.38.27 or 1.38.30 for threaded.

./emsdk install sdk-fastcomp-1.38.27-64bit
./emsdk activate sdk-fastcomp-1.38.27-64bit